La propiedad box-shadow recibe cinco valores en un orden concreto, y la diferencia entre desenfoque y extensión no es evidente solo con la sintaxis. Este generador te da controles deslizantes y una vista previa en directo para ajustar la sombra hasta que se vea natural y copiar el CSS resultante.
El desenfoque suaviza el borde de la sombra sin cambiar su tamaño. La extensión agranda o encoge la forma antes de desenfocarla, así que una extensión negativa con mucho desenfoque produce una sombra ceñida y sutil.
Combinando dos o tres: una sombra corta y más oscura cerca del elemento y otra amplia y tenue más lejos imitan mucho mejor la luz real que una sola sombra intensa. Genera cada capa aquí y únelas separadas por comas.
Para elementos que deben parecer hundidos: botones pulsados, campos de formulario y paneles empotrados. La sombra se dibuja dentro del borde en lugar de fuera.
Los desenfoques grandes en muchos elementos pueden costar tiempo de pintado, sobre todo al hacer scroll. Si notas problemas, reduce el radio de desenfoque o promueve el elemento a su propia capa.
Formateador JSON · Codificador Base64 · Codificador de URL · Decodificador JWT · Ver todas las herramientas
También disponible en: English · Português · Français · Deutsch