Generador de sombras CSS

Crea sombras CSS y efectos de brillo con hasta cinco capas. Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad de cada capa, incluidas las sombras interiores. Copia el CSS o las clases de Tailwind, o descarga un PNG. Empieza con uno de los cinco ajustes predefinidos y adáptalo a tu diseño.

Solo local

Ajustes predefinidos

Elige un preajuste para configurar todos los controles a la vez y ajusta después.

Color de fondo

Radio16pxFondo oscuroUna sombra solo tiene sentido sobre un fondo, así que prueba la pareja en ambos. Una sombra ajustada sobre blanco desaparece por completo en una superficie casi negra, y al revés.

Capas

Capa 1

Color 1

Desplazamiento X0pxDesplazamiento Y1pxDesenfoque3pxExpansión0pxOpacidad0.18

Capa 2

Color 2

Desplazamiento X0pxDesplazamiento Y12pxDesenfoque28pxExpansión-6pxOpacidad0.14

Un preajuste ajusta todos los controles con un clic; Aleatorio hace lo mismo con valores al azar.

CSS

.box {
  border-radius: 16px;
  box-shadow:
    0px 1px 3px 0px rgb(11 11 18 / 0.18),
    0px 12px 28px -6px rgb(11 11 18 / 0.14);
}

Las sombras por capas son lo que da profundidad a una interfaz real: una sombra corta y oscura para el borde de contacto y otra amplia y suave para el volumen ambiental. Una sola sombra grande se lee como un borrón alrededor de la caja, no como luz.

Clases de Tailwind

rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]

Valores arbitrarios, así que cada número es exacto: ninguno se redondea al paso de escala más cercano.

¿Cómo funciona Generador de sombras CSS?

`box-shadow` combina desplazamiento horizontal y vertical, desenfoque, expansión, color y opacidad. La expansión aumenta o reduce el área de la sombra antes de aplicar el desenfoque; un valor negativo ayuda a mantenerla cerca de la caja.

Cada capa se controla por separado. En CSS, la primera sombra de la lista queda delante de las siguientes. Puedes combinar una sombra de contacto corta con una capa ambiental más amplia, o utilizar colores claros para crear un brillo.

La opción `inset` dibuja la sombra dentro de la caja. La vista previa SVG reproduce tanto las sombras exteriores como las interiores, incluida la expansión negativa, y se utiliza también para generar el PNG.

Las sombras no ocupan espacio en la distribución de la página, aunque pueden quedar recortadas por un contenedor. Las áreas grandes y los desenfoques amplios requieren más renderizado; prueba el resultado en móviles si utilizas muchas capas.

Capas de sombra

Capa 1 0 1px 3px 0 · #0b0b12 · 18%
Capa 2 0 12px 28px -6px · #0b0b12 · 14%

CSS generado

.box {
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgb(11 11 18 / 0.18),
    0 12px 28px -6px rgb(11 11 18 / 0.14);
}

¿Qué opciones y casos límite admite Generador de sombras CSS?

Referencia técnica y opciones
Parámetro	Tipo	Valor predeterminado	Comportamiento y casos límite
Desplazamiento X / Y	px	0 / 1	Mueve la sombra horizontal y verticalmente con respecto a la caja; los valores negativos invierten la dirección.
Desenfoque	longitud en px	3	Suaviza los bordes de la sombra; un valor mayor produce una transición más amplia.
Expansión	px	0	Amplía o reduce el área de la sombra antes de desenfocarla; admite valores negativos.
Color y opacidad	rgb con alfa	oscuro al 18%	Define el color y la transparencia de esta capa de sombra.
Sombra interior	palabra clave	desactivada	Dibuja la sombra dentro de la caja mediante `inset`; también aparece en la vista previa y en el PNG.
Capas	1–5, separadas por comas	2	Combina varias sombras. La primera de la lista se pinta delante de las siguientes.
border-radius	px	16	Ajusta el redondeado de la caja y la forma de sus sombras.

Preguntas frecuentes

¿Cómo hago una sombra suave?

Empieza con dos capas: una corta para el contacto y otra más amplia y tenue para la profundidad. Prueba una expansión negativa en la segunda capa para evitar que se extienda demasiado por los lados.

¿Qué hace la expansión?

Amplía o reduce el contorno de la sombra antes del desenfoque. Los valores positivos hacen la sombra más grande y los negativos la contraen. No cambia el tamaño del elemento.

¿Cómo añado un brillo a un botón?

Usa un color claro, un desplazamiento cercano a cero y una opacidad adecuada al fondo. Puedes combinar una capa pequeña e intensa con otra más amplia y tenue para conseguir una transición suave.

¿Afecta `box-shadow` a la distribución o al rendimiento?

La sombra no cambia el espacio que ocupa el elemento, pero un contenedor puede recortarla. Los desenfoques grandes y las múltiples capas aumentan el trabajo de renderizado; comprueba la fluidez en tus dispositivos de destino.

¿Se incluyen las sombras interiores en el PNG?

Sí. La vista previa SVG y el PNG incluyen las capas `inset`, además de las sombras exteriores y la expansión negativa. El CSS exportado conserva esos mismos ajustes.

¿Cuántas capas necesita una tarjeta?

Dos suelen ser un buen punto de partida: contacto y profundidad ambiental. Utiliza las capas adicionales solo si aportan una diferencia útil al diseño, y revisa el resultado sobre el fondo real de la página.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas