Generador Box Shadow CSS
Crea sombras CSS visualmente con vista previa en tiempo real.
0 de 3 usos hoy · 3 restantes. Pasa a Pro y elimina el límite.
Vista previa en vivo
box-shadow: 0px 30px 60px -15px #4f46e566;Capas (1/6)
§ Cómo usar
Cómo generar un box-shadow CSS visualmente
Crea sombras de cualquier profundidad (sutil a dramática) con vista previa y código listo para copiar.
Configura los offsets
X (horizontal), Y (vertical), Blur (suavidad) y Spread (grosor). Arrastra los sliders para feedback visual instantáneo.
Elige el color de la sombra
Por defecto negro con baja opacidad (sombra natural). Para una sombra de color tipo 'glow', elige tu color de marca.
Agrega varias capas (opcional)
Las sombras profesionales usan 2-3 capas (una cercana y una ambiental). Apílalas para una profundidad real.
Copia el CSS
Listo para pegar. Incluye inset opcional (sombra interna) y prefijos cross-browser.
Relacionadas
Herramientas relacionadas
Da mesma categoria.
Convertidor SVG a React
Pega tu código SVG sucio y obtén un Componente React optimizado y formateado para la web moderna.
Probador de Regex
Valida tus expresiones regulares con resaltado en vivo.
Editor de Tabla Markdown
Crea y edita tablas Markdown visualmente con exportación fácil.
Formateador SQL
Identación y formato hermoso para tus consultas de SQL duro.
Formateador JSON
Embellece, valida y minifica tus objetos JSON.
Parser de Expresión Cron
Convierte expresiones cron en lenguaje natural al instante.