Generador de Box Shadow CSS - Herramienta online gratuita

Características

Control mediante deslizadores

Selector de color

Alternar sombra interior

Varias capas

Vista previa en directo y código CSS

Cómo Usar

1. Da forma a la sombra con los deslizadores — la tarjeta neutra de la superficie muestra exactamente el resultado final.

2. Las sombras reales tienen capas: añade hasta cuatro o parte de un preajuste (Suave, Elevada, Flotante, Interior).

3. Cambia la superficie para revisar la sombra sobre blanco, gris y oscuro, y copia el CSS.

Sobre esta herramienta

Las sombras convincentes en las interfaces suelen tener más de una capa: una sombra ceñida y más oscura para el contacto y otra amplia y suave para la distancia. Este generador te permite apilar hasta cuatro capas de box-shadow, ajustando en cada una el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color, la opacidad y el modo interior, mientras una tarjeta neutra en el escenario muestra el resultado exacto. Los ajustes predefinidos te dan puntos de partida —Suave, Elevada, Flotante e Interior— y puedes alternar el escenario entre superficies blancas, grises y oscuras para comprobar que la sombra se sigue leyendo en cada una. El CSS generado lista las capas en el orden correcto con colores rgba, listo para pegar en una hoja de estilos o un archivo de tokens de diseño.

Preguntas Frecuentes

¿Qué significan desplazamiento, desenfoque y expansión?

Los desplazamientos X e Y mueven la sombra a la derecha y hacia abajo (los valores negativos la mueven a la izquierda y hacia arriba). El desenfoque suaviza el borde; cuanto mayor, más difusa. La expansión agranda o encoge la sombra antes de desenfocarla, así que una expansión negativa mantiene una sombra suave recogida bajo el elemento.

¿Por qué usar varias capas de sombra?

Los objetos reales proyectan una sombra nítida cerca de la superficie y otra más suave más lejos. Combinar una capa pequeña y oscura con otra grande y tenue se ve más natural que una sola sombra pesada, y así definen la elevación la mayoría de los sistemas de diseño.

¿Qué hace inset?

Una sombra inset se dibuja dentro del borde del elemento en lugar de fuera, lo que lo hace parecer hundido. Se usa a menudo en campos de entrada, huecos e interruptores.

¿Las sombras perjudican el rendimiento?

Las sombras estáticas cuestan poco. Animar box-shadow en muchos elementos puede provocar repintados, así que para efectos al pasar el ratón plantéate animar la opacidad de un pseudoelemento que ya tenga la sombra, o mantén valores de desenfoque moderados.

¿Por qué mi sombra se ve distinta sobre un fondo oscuro?

Las sombras oscuras pierden contraste sobre superficies oscuras. Los diseños con tema oscuro suelen reducir la opacidad de las sombras y recurrir a superficies más claras o bordes sutiles para mostrar la elevación.