Categoría: Desarrollo
Generador de Box Shadow CSS
Diseña una box-shadow y copia el CSS
Ajusta el desplazamiento, el desenfoque, la extensión, el color y la opacidad, observa una vista previa en vivo y copia una declaración box-shadow lista para pegar. Todo lo dibuja tu propio navegador.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
box-shadow recibe cinco valores en un orden fijo, y pequeños cambios en cualquiera de ellos se ven muy distintos en pantalla, lo que hace incómodo escribirla a ciegas. Esta herramienta dibuja la declaración real sobre una caja de vista previa mientras mueves los controles. Puedes añadir una segunda capa de contacto más cerrada —la combinación que usan los diseñadores para que un elemento parezca elevado en lugar de borroso— y la opción interior vuelve la sombra hacia dentro para superficies hundidas.
Cómo se usa
- Ajusta el desplazamiento horizontal y vertical, el desenfoque y la extensión.
- Elige un color y una opacidad, y activa si quieres la sombra interior o una capa de contacto.
- Copia la declaración box-shadow en tu hoja de estilos.
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 que pinta tu navegador y la declaración se construye en la página.
- ¿Qué hace la extensión?
- La extensión agranda o encoge la sombra antes de desenfocarla. Una extensión negativa la recoge, que es la forma de evitar que una sombra suave se escape por los lados del elemento.
- ¿Por qué usar dos capas?
- Una sola sombra ancha y suave suele parecer niebla. Añadir una capa pequeña y más oscura junto al elemento le da un borde de contacto, y las dos juntas se leen como altura.