Cómo crear una sombra CSS (box-shadow) con vista previa en vivo
Publicado el 14 de septiembre de 2026 · 2 min de lectura
Conseguir que el desplazamiento, desenfoque, expansión y color de una box-shadow se vean bien generalmente significa editar CSS y refrescar una pestaña del navegador repetidamente. Esta herramienta te da deslizadores y una vista previa en vivo para que veas el efecto exacto antes de copiar el CSS.
Probar Generador de sombras CSSPasos
- 1
Abre el Generador de CSS Box Shadow
Ve al generador de box-shadow.
- 2
Elige un preajuste o empieza personalizado
Elige un preajuste estilo Tailwind, o ajusta tu propio desplazamiento, desenfoque, expansión y color.
- 3
Añade una segunda capa de sombra (opcional)
Añade una segunda sombra para más profundidad, como suelen usar los sistemas de diseño.
- 4
Copia el CSS
Pega la regla box-shadow generada directamente en tu hoja de estilos.
Preguntas frecuentes
Sí — activa el modo inset para obtener una sombra que aparece dentro del borde del elemento en lugar de fuera de él.
Sí — activa una segunda capa de sombra para un efecto de profundidad más matizado y en capas, una técnica común en los sistemas de diseño modernos.
Sí — la vista previa renderiza la propiedad box-shadow real de CSS, así que lo que ves es exactamente lo que obtendrás al pegar el código.
Como la vista previa se actualiza en vivo mientras ajustas cada deslizador, puedes afinar una sombra hasta que se vea exactamente bien antes de tocar tu hoja de estilos.