Generador de Box Shadow CSS – Sombras en capas, interiores y suaves

Cómo usar Generador de Box Shadow

1Empieza con un ajuste preestablecido como Suave, En capas o Interior, o ajusta la sombra por defecto.

2Arrastra los controles deslizantes de desplazamiento horizontal y vertical, desenfoque, propagación y opacidad, y elige un color de sombra.

3Añade más capas para una profundidad realista y ajusta el radio de las esquinas y los colores de la vista previa.

4Copia el CSS y pégalo en tu hoja de estilos.

Diseña sombras CSS visualmente

Las sombras aportan profundidad a las interfaces: hacen que las tarjetas resalten en la página, indican qué botón se ha pulsado y separan los cuadros de diálogo del contenido de fondo. La propiedad box-shadow de CSS es muy potente, pero ajustar sus cinco valores a ciegas resulta complicado. Este generador de sombras te ofrece controles deslizantes y vista previa en tiempo real, permite apilar varias sombras para lograr un aspecto natural y genera un código CSS limpio listo para pegar directamente en tu proyecto.

Características

Controles de desplazamiento, desenfoque, propagación, color y opacidad con vista previa instantánea.
Hasta cinco capas combinadas en una sola declaración box-shadow.
Sombras interiores (inset) para efectos de presión y hundimiento.
Radio de las esquinas y colores de vista previa para adaptarlos a tu diseño.
Ajustes preestablecidos para sombras suaves, medias, duras, en capas, interiores y de resplandor.
CSS listo para copiar con colores en formato rgba().

Ejemplo

Una sombra en capas que luce natural sobre fondos claros:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Consejos para diseñar sombras

Objetivo	Ajustes sugeridos
Tarjeta sutil sobre blanco	y 4, desenfoque 12, opacidad 8%
Menú desplegable o diálogo flotante	2–3 capas, y hasta 24, desenfoque hasta 48, opacidad 7–12% c/u
Estilo retro "plano"	x 6, y 6, desenfoque 0, opacidad 100%
Efecto de enfoque o resplandor	x 0, y 0, desenfoque 16–24, propagación 2–4, color de la marca
Campo de entrada presionado	inset, y 2, desenfoque 6, opacidad 25–30%

Mantén la coherencia en la fuente de luz: si las sombras caen hacia abajo en un componente, deberían caer hacia abajo en todos los demás.

Herramientas relacionadas

Crea el fondo para tus tarjetas con el Generador de degradados CSS, convierte colores entre HEX, RGB y HSL con el Conversor de colores, o selecciona colores de una captura de pantalla con el Selector de color de imagen.

Preguntas frecuentes

¿Qué significan los cuatro valores de box-shadow?

En orden, son el desplazamiento horizontal (positivo mueve la sombra a la derecha), el desplazamiento vertical (positivo la mueve hacia abajo), el radio de desenfoque (mayor es más suave) y la extensión (positivo hace la sombra más grande que el elemento, negativo la hace más pequeña). El color va al final.

¿Por qué usar varias capas de sombra?

Las sombras reales son nítidas y oscuras cerca de un objeto, y suaves y tenues más lejos. Apilar dos o tres sombras aumentando el desplazamiento y el desenfoque, pero con baja opacidad, imita este efecto y se ve mucho más natural que una sola sombra intensa.

¿Qué es una sombra interior?

Una sombra interior (inset) se dibuja dentro del elemento en lugar de afuera, dándole un aspecto hundido. Se usa a menudo en campos de texto, botones presionados y contenedores.

¿Por qué mi sombra se ve gris sobre un fondo de color?

Las sombras negras se ven apagadas sobre superficies de color. Prueba usar un tono más oscuro del color de fondo para la sombra en lugar de negro puro: tendrá un aspecto más rico y natural.

¿Afecta box-shadow al rendimiento?

Unas pocas sombras consumen pocos recursos. Sin embargo, usar radios de desenfoque muy grandes en muchos elementos, o animar box-shadow al hacer scroll, puede ralentizar el renderizado en teléfonos móviles básicos. Para animar una sombra, es mejor animar la opacidad de un pseudoelemento que contenga la sombra.