Inicio › Generador de sombras CSS
Privado: nada sale de tu navegador. Sin registro.
Generador de sombras CSS
Diseña sombras CSS perfectas con controles. Gratis, sin registro, código listo para copiar.
Qué hace
Arrastra los controles de desplazamiento horizontal y vertical, radio de desenfoque, expansión, color y opacidad. La tarjeta de vista previa se actualiza al instante y la herramienta genera la declaración box-shadow exacta para pegar en tu hoja de estilos. Activa inset para sombras internas.
Consejos
Las sombras suaves de baja opacidad se ven modernas: prueba un gran desenfoque con 10 a 20 % de negro. La expansión agranda o encoge la sombra más allá de los bordes del elemento.
Privado por diseño
Todo se ejecuta en tu navegador. Nada sale de tu dispositivo.
Estimación orientativa. Los resultados usan las tarifas públicas indicadas y pueden diferir de tu factura real. Términos
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y expansión?
El desenfoque suaviza los bordes de la sombra; la expansión agranda o encoge el tamaño total de la sombra antes del desenfoque.
¿Qué hace inset?
Inset dibuja la sombra dentro del borde del elemento en lugar de fuera, útil para efectos hundidos.
¿Algo se envía a un servidor?
No. El editor se ejecuta por completo en tu navegador.