Generador de box-shadow CSS

Ajusta desplazamiento, desenfoque, extensión, color y opacidad viendo el resultado, y llévate el CSS. Incluye ajustes que superponen varias sombras para una sensación de profundidad más natural.

🎨 Todo funciona en tu navegador. Sin instalar nada, sin registro.

Desplazamiento X0px

Desplazamiento Y8px

Desenfoque20px

Extensión-4px

Color de la sombra

Opacidad20%

Sombra interior (inset): aspecto hundido

box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);

Una sombra natural suele caer recta hacia abajo (desplazamiento X de 0) y usa un azul marino tenue en vez de negro, algo más oscuro que el fondo. Las sombras negras puras se ven turbias.

Qué hace esta herramienta

Desplazamiento, desenfoque, extensión y color
Admite sombras interiores (inset)
Ajustes naturales de varias capas
Copia el CSS

Otras herramientas de color

Generador de degradados CSSCrea un degradado CSS con dos o tres colores Generador de paletas de coloresSaca los colores que combinan con uno base, por regla Generador de tonos de colorConvierte un color en una escala 50–900 Mezclador de coloresEncuentra el color que está entre dos

Los colores pueden verse algo distintos según tu pantalla y su perfil de color.