Cómo usar el generador de CSS box-shadow y glassmorphism
- Elige «Box-Shadow» o «Glassmorphism» con las pestañas de arriba.
- Mueve los deslizadores. La vista previa se actualiza al instante y el código CSS se escribe por ti en el cuadro de abajo.
- Cuando te guste el resultado, pulsa «Copiar CSS» y pégalo en tu hoja de estilos.
La pestaña Box-Shadow te permite apilar hasta cinco capas de sombra. Parte de un ajuste preestablecido y retoca cada capa un poco.
Qué significan los valores de box-shadow
box-shadow se escribe como «desplazamiento-x desplazamiento-y desenfoque extensión color». Los desplazamientos mueven la sombra, el desenfoque decide hasta dónde se suaviza el borde, y la extensión agranda (positiva) o encoge (negativa) la propia sombra. Por ejemplo, 0 10px 30px -5px rgba(0, 0, 0, 0.25) es una sombra amplia y suave empujada 10 px hacia abajo; como la extensión es de −5 px, queda un poco más pequeña que la caja, lo que mantiene limpios los bordes. Añadir inset pone la sombra dentro de la caja, de modo que parece hundida. El desenfoque nunca puede ser negativo.
Cómo se construye el glassmorphism
El aspecto de cristal esmerilado tiene tres partes. Primero, un color de fondo semitransparente (por ejemplo, blanco al 22 % de opacidad). Segundo, backdrop-filter: blur(), que desenfoca lo que hay detrás de la caja. Tercero, un borde fino y claro que imita el reflejo en el canto de un cristal. Esta herramienta también permite ajustar saturate para que los colores que hay detrás del cristal no se vean apagados, y escribe además -webkit-backdrop-filter para algunas versiones de Safari. Para ver bien el efecto debe haber un fondo colorido o una imagen detrás de la caja. Sobre un color liso no hay nada que desenfocar, así que parece una caja translúcida corriente.
Cosas que tener en cuenta
- El texto sobre cristal puede resultar difícil de leer según lo que haya detrás. Se recomienda una relación de contraste de al menos 4,5:1 para el texto del cuerpo, así que compruébalo con el comprobador de contraste de color.
- Usar varios backdrop-filter con mucho desenfoque en una misma pantalla puede hacer que el desplazamiento vaya a tirones en dispositivos modestos. Úsalo solo donde importe.
- Los estilos de bajo contraste, como el neumorfismo, pueden hacer difíciles de ver los bordes de los botones, lo que perjudica la accesibilidad.
- Para entornos sin backdrop-filter, añade como alternativa segura un fondo más opaco mediante una regla @supports que detecte la falta de soporte.
Preguntas frecuentes
No veo la sombra en pantalla.
Una sombra es invisible cuando su opacidad es 0 o cuando su color coincide con el fondo. Si el desenfoque, la extensión y los desplazamientos son todos 0, la sombra también queda totalmente oculta tras la caja. Sube la opacidad y añade un pequeño desplazamiento vertical para comprobarlo rápido.
backdrop-filter no tiene efecto.
El propio elemento necesita un fondo semitransparente; si no, no hay nada que deje ver el desenfoque. Algunos navegadores antiguos no lo admiten, así que conviene mantener un estilo alternativo con una opacidad de fondo algo mayor para esos navegadores.
¿En qué orden se apilan varias sombras?
En un box-shadow separado por comas, la primera sombra se pinta encima. Pon primero las sombras pequeñas y nítidas y después las amplias y suaves para lograr una sensación natural de profundidad.
Notas
Esta herramienta solo escribe código de estilo como referencia. Antes de usarlo en un sitio real, comprueba cómo se ve y cómo rinde en varios navegadores y dispositivos.