Generador de box-shadow
Ajuste desplazamiento, desenfoque y extensión con controles y copie la línea de box-shadow.
CSS
Crear una sombra CSS online
Las sombras despegan de la página tarjetas, botones y menús. Esta página abre el Generador CSS en su pestaña de sombra de caja, para que ajuste la sombra sobre una vista previa en lugar de editar números y recargar.
Sombras habituales
| CSS | Uso |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | Sombra fina para tarjetas y campos |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | Tarjeta elevada con sombra suave |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | Sombra desplazada y nítida, estilo plano |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | Campo o botón hundido |
Rendimiento
Las sombras grandes y desenfocadas cuestan tiempo de dibujo, sobre todo cuando se animan. Para animar una sombra al pasar el ratón, un truco habitual es poner la sombra en un pseudoelemento y animar su opacidad en lugar de la propia sombra.
Herramientas relacionadas
Para redondear el mismo elemento, vea el generador de border-radius; la sombra sigue las esquinas redondeadas. Para un fondo, vea el generador de degradados CSS.