Generador de Box-Shadow

Qué hace

Diseña valores CSS box-shadow por capas con vista previa en vivo y salida lista para copiar. Cada capa tiene las cinco propiedades estándar - desplazamiento X, desplazamiento Y, desenfoque, expansión, color - más un interruptor inset y un deslizador de opacidad 0-1 cuyo valor se compone en un color rgba() en el momento de generar. Apila tantas capas como necesites; se unen con comas en el orden de salida, exactamente como espera CSS.

Cinco preajustes de un clic (Soft, Sharp, Elevated, Inner, Glow) sustituyen las capas actuales por combinaciones probadas - valores por defecto de una capa más una pila de dos capas “Elevated”. El escenario de vista previa renderiza tu sombra sobre una caja redondeada cuyo color controlas, sobre un fondo a elegir entre liso, damero o dividido para juzgar la opacidad. 100% en el cliente.

Cómo usarlo

1. Pulsa un preajuste en la barra para partir de una sombra conocida como buena, o edita directamente la capa suave inicial. Reset vuelve a la capa suave única por defecto.
2. En Stage, elige el Fondo de la vista previa (liso / damero / dividido) y ajusta el color de la caja con el selector de muestra.
3. En cada sección Layer, afina los controles:
   • Inset - dibuja la sombra dentro de la caja en lugar de fuera.
   • Color - el color base de la capa (selector de muestra, hex).
   • Offset X / Offset Y - posición en píxeles; los negativos son válidos.
   • Blur - radio de desenfoque en píxeles (mínimo 0).
   • Spread - expande o contrae la sombra; los valores negativos la ajustan.
   • Opacity - deslizador 0-1, mezclado en el color rgba() emitido.
4. Pulsa Add layer para apilar otra sombra (p. ej. una sombra de contacto ajustada bajo una ambiental amplia). Elimina capas con el botón de papelera de cada sección - la última capa no se puede eliminar.
5. Observa cómo la vista previa se actualiza mientras editas.
6. Pulsa Copy en la salida CSS para llevarte la declaración terminada.

Ejemplos

Verificado ejecutando buildBoxShadow() de src/lib/boxShadow.ts con los valores exactos de capa que instalan los cinco preajustes:

Soft (también el estado inicial de la herramienta)

box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);

Elevated - dos capas, contacto ajustado + ambiental amplia:

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);

Inner

box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);

Glow - sombra coloreada, sin desplazamiento:

box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);

Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

Buen saber

• Privado: la generación es local; nada se sube.
• Las capas se emiten unidas por comas en el orden de la lista - la primera capa se pinta encima en CSS, así que el orden importa visualmente.
• La opacidad se aplica por capa vía rgba(), así que puedes mezclar una pesada sombra de contacto negra con un brillo coloreado tenue en una sola declaración.
• El fondo dividido muestra tu sombra contra ambas mitades, clara y oscura a la vez - la forma más rápida de comprobar una sombra que debe funcionar en ambos temas.
• La expansión negativa (-4px, -6px en los preajustes) impide que un desenfoque grande se derrame más allá de los bordes de la caja.
• Herramientas relacionadas: CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter