Sombras CSS

Diseña box-shadow con varias capas, vista previa en vivo y copia el CSS o la clase de Tailwind.

Se procesa en tu navegador · Compruébalo Sin envíosDatos enviados: 0 · A otros dominios: 0Analítica: no existe · Anuncios: no existe

Prueba un ejemplo

Fondo de la caja

Capas de sombra

Capa 1

Horizontal: 0pxVertical: 4pxDesenfoque: 6pxExpansión: -1pxOpacidad: 10%

Interior (inset)

Capa 2

Horizontal: 0pxVertical: 2pxDesenfoque: 4pxExpansión: -2pxOpacidad: 10%

Interior (inset)

CSS

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

Tailwind

shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]

Importar un box-shadow existentePega el valor o la declaración completa; se carga en el editor.

Aprende

¿Qué es?

box-shadow dibuja una sombra alrededor de una caja. Se escribe con 2 a 4 longitudes y un color: 0 4px 6px -1px rgba(0,0,0,.1) significa «sin desplazamiento horizontal, 4 px hacia abajo, 6 px de desenfoque, 1 px menos de tamaño, negro al 10 %». Puedes apilar varias separadas por comas.

¿Para qué sirve?

Dar la sensación de que una tarjeta o un menú «flota» sobre el fondo (elevación).
Resaltar un botón o campo enfocado con un halo de color (resplandor).
Crear efectos de relieve como el neumorfismo, o botones «hundidos» con inset.
Obtener el valor exacto para pegarlo en CSS o en Tailwind.

¿Cómo funciona por dentro?

El navegador dibuja una copia del borde de la caja, la desplaza (x, y), la agranda o encoge (expansión), la difumina (blur) y la pinta con el color por detrás del elemento. Con varias capas, la primera queda arriba. Las sombras realistas combinan capas: una cercana y poco difusa (el contacto) y otra lejana y muy difusa (la luz ambiente), ambas con poca opacidad.

Errores comunes

Sombras demasiado oscuras: una opacidad del 5-20 % suele bastar; las sombras fuertes envejecen un diseño.
Desenfoque negativo: no es válido y CSS descarta toda la regla.
Olvidar que no afecta al layout: la sombra no ocupa espacio; puede quedar recortada por un overflow: hidden del contenedor.
Muchas capas grandes: cada capa cuesta al dibujar; en listas largas y animaciones puede notarse.
Sombras sólo con negro puro: mezclar un poco del color del fondo se ve más natural.

Glosario

Desplazamiento:: Los dos primeros valores - cuánto se mueve la sombra en horizontal y en vertical.
Desenfoque (blur):: Lo difuminado que está el borde; 0 es un borde duro.
Expansión (spread):: Cuánto crece o se encoge la sombra antes de difuminarse.
Inset:: Dibuja la sombra dentro del elemento en lugar de fuera.

Para saber más

Más en Diseño web

Aprende paso a paso en la rutaCSS visual para tu web