Generador de Box Shadow CSS

¿Qué hace box-shadow en realidad?

box-shadow pinta una sombra alrededor del elemento (o dentro, con inset) siguiendo su border box. Cada capa usa hasta seis valores: la palabra opcional inset, los desplazamientos X e Y, el radio de desenfoque (blur), el radio de spread y un color. Varias capas separadas por coma se apilan en el orden en que aparecen, con la primera dibujada arriba. Ese apilado es lo que da profundidad a las sombras de UI moderna: una capa apretada y oscura para el contacto, una capa amplia y suave para la luz ambiente y, a veces, un leve resplandor de color por encima. Este generador trae un escenario con fondo a cuadros transparente para que veas exactamente cómo cae la sombra — incluidos los efectos sutiles que desaparecen sobre fondo plano. Puedes arrastrar cualquier valor con el slider para ajustar rápido, escribir el número exacto en píxeles cuando un diseñador te pasa specs, y reordenar capas cuando importa el orden de pintura. La salida cubre tanto CSS puro como la sintaxis de valor arbitrario de Tailwind (shadow-[...]), y la pila actual de sombras se codifica en el hash de la URL para que un enlace compartido reconstruya exactamente la misma sombra del otro lado. Sin ida al servidor: todo se renderiza en el cliente conforme cambias las entradas.

Cómo usarlo

1. Empieza desde un preset

La fila de presets te da seis puntos de partida comunes. Sutil y Suave quedan bien en cards; Recta tiene aire de UI plana; Neumórfica necesita un fondo de color para leerse bien; Brillo luce en UI oscura; Profunda es para modales.

2. Ajusta los valores

Cada capa tiene desplazamientos X / Y, blur, spread, color y opacidad, más el toggle de inset. Arrastra los sliders para feedback en vivo o escribe el número exacto en el cuadro al lado de cada slider.

3. Apila y reordena

Pulsa Agregar capa para apilar más sombras. Cada capa nueva entra con valores neutros. Usa las flechas arriba / abajo para reordenar — la primera capa se pinta al final (encima).

4. Copia la salida

Copia el CSS directo a tu hoja de estilos, o toma la clase arbitraria de Tailwind para uso inline. Copiar enlace te da una URL que reconstruye la pila exacta — útil para mandar al diseñador.

Anatomía de la sintaxis de box-shadow

La sintaxis completa es box-shadow: [inset] <desplazamiento-x> <desplazamiento-y> <blur> <spread> <color>. Los desplazamientos X / Y mueven la sombra horizontal y verticalmente. Y positivo empuja la sombra hacia abajo (la convención de luz desde arriba). El blur suaviza los bordes; 0 es una sombra dura. El spread agranda o achica la sombra antes de aplicar el blur — valores positivos la hacen más grande, negativos la aprietan para que solo asome desde los bordes. El color acepta cualquier color CSS, pero rgba() con alpha bajo suele verse mejor que un negro totalmente opaco — las sombras reales son oclusiones parciales, no pintura. La palabra opcional inset pinta la sombra dentro de la caja, útil para botones presionados. Varias sombras separadas por coma se apilan de adelante hacia atrás: la primera gana donde se solapan.

Elegir valores que funcionan

Cards / paneles: Y de 4–12px, blur 12–28px, spread -2 a -8, alpha 0,08–0,20. Dos capas (una apretada, una ancha) suelen ganarle a una capa fuerte sola. Botones: Y de 1–2px, blur 2–4px, alpha muy bajo — piensa en una sombra de contacto. Modales: Y de 20–40px, blur 40–80px, spread negativo, alpha 0,25–0,45. Brillo: X e Y en 0, blur 20–60px, color es el accent de marca a 30–60% de alpha. Inset: desplazamientos pequeños (1–2px) y blur mínimo para estados presionados. Evita: negro puro a alpha total — aplasta todo lo que está debajo. Usa el tono del fondo de la página en una versión más oscura para sombras que se sienten realmente pegadas al elemento.

Preguntas frecuentes