CSS Box Shadow Generator
Diseña box-shadows CSS multi-layer con preview en vivo
Cómo funciona
- 1Ajusta los sliders
Mové x, y, blur, spread y elegí un color. El preview se actualiza al instante.
- 2Agrega más layers
Los shadows de sistemas de diseño reales apilan varias layers - dale a + Add layer para armar profundidad.
- 3Copy el CSS
Pegá la declaración box-shadow lista para usar en tu stylesheet.
Sobre CSS Box Shadow Generator
CSS box-shadow generator gratis online. Diseña shadows multi-layer elegantes con sliders para x, y, blur, spread y color, más soporte inset. Preview en vivo y copy de CSS en un click. Corre entero en tu browser. CSS Box Shadow Generator en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.
Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.
Preguntas frecuentes
¿Por qué layer varios shadows?
Un shadow solo rara vez se ve natural. Sistemas como Material y los shadows por defecto de Tailwind usan 2-3 shadows apilados para profundidad realista.
¿Diferencia entre blur y spread?
Blur suaviza el borde (falloff Gaussiano). Spread expande o contrae el shadow antes del blur - útil para shadows más ajustados y duros.
¿Cuándo usar inset?
Los shadows inset se dibujan por dentro del box - buenísimos para efectos de botón presionado, glows internos sutiles o form fields 'inset'.
Leer más
Glassmorphism, neumorphism, and where 2026 UI is actually heading
The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.
Tailwind to plain CSS: migration, extraction, and component patterns
You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.
CSS box-shadow patterns that look professional (not cheap)
A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.
Herramientas relacionadas
Color Converter
Convierte entre HEX, RGB, HSL y CMYK con preview en vivo
Palette Generator
Genera paletas de color armoniosas desde un color base
CSS Gradient
Diseña gradients CSS linear, radial y conic con preview en vivo
Contrast Checker
Chequeá contraste texto/background contra WCAG 2.1 AA y AAA - preview en vivo
Glassmorphism
Diseñá cards CSS de frosted-glass con preview en vivo y código copy-ready
Physics Editor
Editor de hitbox de sprites gratis online - auto-traceá collision polygons y exportá para Phaser, Matter.js, Rapier o cualquier engine 2D