Generador de CSS Box Shadow
Construye sombras CSS de múltiples capas visualmente con vista previa en tiempo real — copia el CSS con un clic
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
Sigue explorando
Otras herramientas de Desarrollo que te pueden gustar…
Formateador JSON
Formatea, valida y minifica JSON con resaltado de sintaxis y detección de errores
Codificador/Decodificador Base64
Codifica texto o archivos a Base64 y decodifica cadenas Base64 a texto legible
Codificador/Decodificador de URL
Codifica y decodifica componentes URL y parámetros de query string
Generador de UUID
Genera UUIDs aleatorios (v1, v4) o genera múltiples UUIDs en lote
Generador de Hash
Genera hashes MD5, SHA-1, SHA-256, SHA-512 desde texto o archivos
Tester de Regex
Prueba expresiones regulares con resaltado de coincidencias en tiempo real
Decodificador JWT
Decodifica e inspecciona JSON Web Tokens — ve header, payload y verifica firmas
Formateador HTML
Formatea y embellece código HTML con indentación correcta y resaltado de sintaxis