Categoría: Desarrollo
Generador de sombras CSS multicapa
Diseña un box-shadow por capas desde un único conjunto de controles
Ajusta desplazamiento, desenfoque, expansión, color y número de capas, observa una vista previa en vivo y copia una declaración box-shadow de varias capas construida como los diseñadores apilan sombras para lograr profundidad real. Todo se renderiza en tu propio navegador.
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Una sola capa de box-shadow tiende a parecer niebla plana; la elevación real proviene de apilar varias capas que se encogen y se difuminan a medida que se acercan al elemento, igual que se atenúa la luz ambiental. Esta herramienta toma un único conjunto de controles de desplazamiento, desenfoque, expansión y color más un número de capas, y deriva automáticamente esa cantidad de capas progresivamente más ajustadas y opacas, para obtener una sombra apilada convincente sin ajustar cada una a mano.
Cómo se usa
- Elige cuántas capas generar.
- Ajusta el desplazamiento, desenfoque, expansión, color y opacidad de la capa base.
- Copia la declaración box-shadow multicapa generada.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Se sube algo?
- No. La vista previa es una sombra CSS pintada por tu navegador y la declaración se ensambla en la página.
- ¿Cómo se derivan las capas individuales?
- Cada capa reduce el desplazamiento, el desenfoque y la expansión hacia el elemento y aumenta su opacidad cuanto más cerca está, el mismo patrón de encogimiento y difuminado usado en los sistemas de elevación construidos a mano.
- ¿Por qué se limita el número de capas?
- Más allá de cinco o seis capas la diferencia visual se vuelve insignificante mientras el CSS sigue creciendo, así que el control tiene un tope para mantener el resultado fácil de leer y pegar.