Generador de sombras CSS
Superpón unas cuantas capas suaves para lograr sombras de aspecto natural y copia el CSS.
Sellado en este dispositivo
Funciona en tu navegador. No se sube nada.
Sellado
Vista previa
Capas de sombra
Todavía no hay sombra. Añade una capa para empezar.
Código CSS
Cómo funciona
-
Parte de un ajuste predefinido
Elige una sombra suave, en capas, flotante, nítida o interior como punto de partida.
-
Ajusta las capas
Modifica el desplazamiento, el desenfoque, la extensión, el color y la opacidad de cada capa, y añade o quita capas. La vista previa se actualiza sobre la marcha.
-
Copia el CSS
Copia la declaración box-shadow y pégala en tu hoja de estilos.
Preguntas frecuentes
¿Para qué sirven el desenfoque y la extensión?
El desenfoque suaviza el borde de la sombra: cuanto más alto es el valor, más difusa queda. La extensión agranda o reduce la sombra antes de aplicar el desenfoque. Una extensión negativa con un desenfoque grande da ese aspecto suave y elevado tan habitual en las interfaces modernas.
¿Por qué usar varias capas de sombra?
Las sombras reales tienen un núcleo oscuro y concentrado cerca del objeto y un halo suave y amplio más lejos. Superponer una capa pequeña y nítida con una o dos capas más grandes y claras reproduce ese efecto y resulta mucho más natural que una sola sombra.
¿Qué es una sombra interior?
Una sombra interior (inset) se dibuja dentro del elemento en lugar de fuera. Hace que la superficie parezca hundida, lo que queda bien en campos de formulario o botones pulsados.
¿La sombra funcionará en todos los navegadores?
Sí. box-shadow, las capas múltiples y la sintaxis de color rgb() que se usa en el código son compatibles con todos los navegadores actuales.
¿Una sombra ralentiza mi página?
Las sombras estáticas cuestan poco de dibujar. Los desenfoques muy grandes en muchos elementos, o animar la propia sombra, pueden costar más. Para animar una sombra con fluidez, mejor haz un fundido de la opacidad de un pseudoelemento que lleve la sombra.