Generador de box-shadow CSS
Genere sombras CSS box-shadow con sliders intuitivos. Presets y exportación de código CSS.
Presets
Capas de sombra
Vista previa
Código CSS generado
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Todo sobre el generador de box-shadow CSS
¿Por qué usar este generador de box-shadow?
La propiedad CSS box-shadow añade sombras a cualquier elemento HTML, pero su sintaxis con 6 parámetros (desplazamiento X/Y, desenfoque, extensión, color, inset) es difícil de memorizar y ajustar manualmente.
Nuestro generador ofrece controles deslizantes intuitivos con vista previa en tiempo real. Prueba presets (sutil, media, fuerte, inset, neón) y copia el código CSS en un clic.
Funciona completamente en tu navegador. No se envían datos. Ideal para prototipado rápido y experimentación de diseño.
¿Quién usa este generador?
- Desarrolladores front-end
- Genera rápidamente sombras CSS limpias sin ajustar valores manualmente.
- Diseñadores UI/UX
- Experimenta visualmente diferentes estilos de sombras para tus maquetas y design systems.
- Desarrolladores principiantes
- Aprende la sintaxis box-shadow de forma interactiva viendo el efecto de cada parámetro en tiempo real.
- Freelancers y agencias
- Ahorra tiempo en ajustes visuales y copia directamente el código CSS en tus proyectos.
Cómo generar una sombra CSS
Ajusta los controles para el desplazamiento horizontal (X), vertical (Y), radio de desenfoque y extensión.
Elige el color y la opacidad de la sombra. Activa la opción inset para una sombra interior.
Copia el código CSS generado y pégalo directamente en tu hoja de estilos.
Preguntas frecuentes
- ¿Qué es la propiedad CSS box-shadow?
- box-shadow es una propiedad CSS que añade una o más sombras alrededor de un elemento HTML. Su sintaxis es: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Compatible con todos los navegadores modernos.
- ¿Cuál es la diferencia entre blur y spread?
- El blur (desenfoque) hace los bordes de la sombra graduales. El spread (extensión) agranda o reduce el tamaño de la sombra: valores positivos la expanden, negativos la reducen. Combinados permiten efectos muy variados.
- ¿Qué es una sombra inset?
- La palabra clave inset transforma la sombra exterior en interior, proyectada dentro del elemento. Crea un efecto de profundidad útil para campos de formulario, botones presionados o efectos de relieve.
- ¿Se pueden añadir varias sombras a un mismo elemento?
- Sí. En CSS puedes combinar varias sombras separándolas con comas. Las sombras múltiples crean efectos de profundidad más realistas.
- ¿Las box-shadow afectan el rendimiento?
- Las sombras CSS requieren recálculo del renderizado, lo que puede afectar el rendimiento en elementos animados o numerosos. Para animaciones, prefiere filter: drop-shadow(). En elementos estáticos, el impacto es insignificante.
Comprender las sombras en CSS
¿Cómo funcionan las sombras en CSS?
CSS ofrece dos propiedades de sombra: box-shadow para elementos de caja y text-shadow para texto. box-shadow dibuja una sombra que sigue la forma rectangular del elemento (incluyendo border-radius). El navegador calcula la sombra aplicando un desplazamiento, desenfoque gaussiano y extensión.
¿Cuáles son las buenas prácticas para sombras en diseño web?
Se recomienda usar sombras sutiles con colores semi-transparentes (rgba o hsla) en lugar de negro puro. Combina varias sombras de diferentes tamaños para un efecto más natural. Mantén consistencia en la dirección de la luz en toda la página.
¿Cuál es la diferencia entre box-shadow y filter: drop-shadow()?
box-shadow dibuja una sombra alrededor de la caja rectangular del elemento, mientras que filter: drop-shadow() sigue la forma real (incluyendo áreas transparentes de imágenes PNG). drop-shadow es más eficiente para animaciones con aceleración GPU, pero no soporta sombras múltiples ni spread.