Generador de box-shadow CSS
Crea sombras CSS en capas con controles deslizantes para desplazamiento, desenfoque, extensión, color, opacidad e inset — previsualiza sobre un elemento real y copia el CSS listo al instante.
box-shadow: —;
Todo se actualiza en vivo en tu navegador — sin subidas, sin registro, completamente gratis.
Acerca de Generador de box-shadow CSS
El Generador de Sombras CSS (Box Shadow) te permite diseñar sombras de caja visualmente en lugar de adivinar valores en código. Arrastra los deslizadores de desplazamiento horizontal y vertical, radio de desenfoque, radio de expansión, color y opacidad — con un interruptor de sombra interior (inset) — y observa cómo se actualiza un elemento real en vivo. Cuando quede bien, copia el CSS ya listo para pegar con un clic.
Las sombras de las interfaces modernas rara vez son una sola capa. Este generador admite capas de sombra apiladas: añade, duplica, oculta o elimina capas, y previsualiza la capa seleccionada sola o todas las capas combinadas. Apilar una sombra oscura y ajustada bajo una suave y amplia es como las tarjetas y botones bien pulidos consiguen su profundidad.
También puedes estilizar el propio elemento de previsualización — color de la caja, radio de borde y fondo del lienzo — para que la sombra se juzgue en un contexto realista, incluidas superficies oscuras. Empieza desde un preajuste, pulsa “Aleatorizar capa” para inspirarte, y reinicia cuando quieras partir de cero. Todo funciona en tu navegador.
Cómo usar Generador de box-shadow CSS
- Ajusta los deslizadores de desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión, color y opacidad, y activa “Sombra interior” si quieres una sombra interna.
- Haz clic en “Añadir capa” o “Duplicar capa” para apilar sombras, y cambia el modo de previsualización entre “Esta capa” y “Todas las capas” para ajustar cada una.
- Ajusta el elemento y el lienzo — color de la caja, radio de borde y fondo — para que la previsualización coincida con tu diseño real.
- Aplica un preajuste o usa “Aleatorizar capa” si prefieres un punto de partida en lugar de deslizadores en blanco.
- Copia la regla CSS completa (o solo el valor) y pégala en tu hoja de estilos.