Generador CSS

Generador de sombras CSS

Diseña box-shadow y text-shadow visualmente, combina varias capas y copia CSS listo para usar.

Capas de sombra

Ajustes de sombra

Preajustes

Vista previa en vivo

Aspecto de la vista previa

CSS generado

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

Comprende los valores de las sombras CSS

box-shadow combina desplazamientos horizontal y vertical, desenfoque, expansión, color y la palabra opcional inset. text-shadow usa desplazamientos, desenfoque y color. Los controles actualizan al instante la declaración completa para mostrar el efecto de cada valor.

Crea profundidad con varias capas

Varias sombras sutiles suelen parecer más naturales que una sola sombra intensa. Combina una capa oscura y cercana para el contacto con otra suave y amplia para la elevación, o apila capas de color para crear un resplandor.

De la vista previa al CSS de producción

Elige box-shadow o text-shadow, parte de un ajuste predefinido y afina posición, desenfoque, expansión, opacidad, radio y colores. Copia el CSS cuando se vea bien y pruébalo sobre el fondo real y los estados adaptables de tu proyecto.

Aprende y sigue creando

Ayúdanos a mejorar esta herramienta

¿La herramienta funcionó como esperabas?

Envía un informe breve con una captura o archivo. El nombre de la herramienta se completará automáticamente.