Generador de sombras CSS
Apila hasta 8 capas de box-shadow con desplazamiento, desenfoque, extensión, color e inset, previsualízalas y copia el CSS.
- Funciona en tu navegador
- Sin subir archivos
- El resultado se queda en tu dispositivo
Privacidad y límitesSe ejecuta en tu navegador. No se sube nada.
El contenido de las entradas queda en esta pestaña; Refentra no lo sube ni guarda. Los recuentos agregados opcionales de acciones solo se envían con tu consentimiento de medición de uso. Borra el espacio al terminar.
Perfil compatible: 1–8 capas px editables, inset y alfa 0–1; desenfoque no negativo.
Máximo 200.000 unidades UTF-16; los parsers pueden admitir menos. Worker: 15 segundos (regex 1,5 segundos).
Revisa la entrada y el resultado
- Prepara la entrada y elige la operación
Ajusta los desplazamientos horizontal y vertical, el desenfoque, la extensión, el color y el alfa de cada capa; activa inset para las sombras interiores.
- Comprueba un ejemplo concreto
Prueba esta muestra y compara el resultado indicado: x=0 y=4 blur=8 spread=0 color=#000000 alpha=0.25 → 0px 4px 8px 0px rgba(0, 0, 0, 0.25)
- Revisa el resultado antes de reutilizarlo
Revisa la sombra compuesta sobre un fondo que contraste; las capas múltiples se separan con comas y conservan su orden.
Respuestas sobre esta tarea
¿Por qué puede desaparecer una sombra después de copiarla?
Un elemento ascendente con recorte o con overflow puede cortarla; un alfa 0 o un fondo del mismo color también pueden ocultar una sombra por lo demás válida.
¿Qué compruebo si falla la entrada?
Indica de 1 a 8 capas válidas; el desenfoque no puede ser negativo y el alfa debe estar entre 0 y 1. Los desplazamientos y la extensión sí pueden ser negativos.
¿Hasta dónde llega esta herramienta?
El resultado da estilo a la caja del elemento; no genera text-shadow ni sigue el contorno opaco de una imagen transparente.