Generador de sombras CSS (box-shadow, text-shadow)

Ajusta box-shadow, text-shadow y filter: drop-shadow() con deslizadores, apila varias capas de sombra y le entrega el CSS. Sirve para decidir la profundidad de una tarjeta o un botón, un aspecto hundido con inset o un contorno de texto mientras observa una vista previa en directo.

Cómo se usa

1. En «Tipo», elija box-shadow, text-shadow o filter: drop-shadow.
2. En cada capa de «Capas de sombra», ajuste «Desplazamiento X», «Desplazamiento Y», «Desenfoque», «Expansión» (solo box-shadow), «Color de la sombra» y «Opacidad». Active «Interior» para obtener una sombra interna.
3. Pulse «Añadir capa» o «Duplicar» para tener más capas y use las flechas para reordenarlas. Si desmarca una capa, queda excluida por el momento.
4. En la vista previa de la izquierda, ajuste «Fondo», «Color de la tarjeta», «Radio de las esquinas» y «Tamaño de la tarjeta» para que se parezcan a su pantalla real.
5. Si lo desea, elija un punto de partida en «Preajustes» y después pulse «Copiar» junto al CSS.

Cómo funciona

• Una capa de box-shadow se escribe como «[inset] x y desenfoque expansión color». Una expansión positiva agranda la sombra y una negativa la reduce. text-shadow no tiene expansión ni inset.
• filter: drop-shadow() sigue la forma visible (un icono PNG, un SVG) en lugar de la caja, y varias funciones escritas una tras otra se apilan.
• Los colores se escriben en HEX cuando son opacos y como rgb(r g b / a) en caso contrario. Una profundidad natural suele obtenerse con dos o tres capas de baja opacidad y desenfoque creciente.
• Las capas y los ajustes de la vista previa se guardan en este navegador.

Preguntas frecuentes

¿Cuál es el orden de los valores en box-shadow?

Desplazamiento X, desplazamiento Y, desenfoque, expansión y color, con inset al principio para una sombra interna. Por ejemplo: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).

¿Cómo doy a una tarjeta una sombra natural?

Apile dos o tres capas con una opacidad del 10 al 20 por ciento y aumente paso a paso el desplazamiento vertical y el desenfoque. Los preajustes «Elevación media» y «Suave, 5 capas» están construidos así.

¿Puede text-shadow crear un contorno de texto?

Sí. Cuatro sombras sin desenfoque en las cuatro direcciones (1px 1px, -1px -1px, 1px -1px, -1px 1px) forman un contorno fino. El preajuste «Contorno de texto» hace exactamente eso.

¿Cuál es la diferencia entre box-shadow y el filtro drop-shadow?

box-shadow sombrea la caja rectangular del elemento; el filtro drop-shadow sombrea la forma visible. Para iconos o SVG sobre fondo transparente, drop-shadow es la opción correcta.