Preajustes
Cristal
background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
Qué hace
Crea CSS de cristal esmerilado (glassmorphism) — backdrop-blur, un fondo translúcido, un borde sutil y una sombra suave. Ajusta blur, opacidad, tinte, radio, borde y saturación, previsualízalo en vivo y copia el bloque de declaración completo. 100 % en el cliente.
Cómo usarlo
- Ajusta los sliders: Blur, Opacity, Border, Radius, Saturation.
- Elige un color de Tint.
- Copy el CSS.
Ejemplos
Blur 12, opacidad 0.6, tinte blanco, radio 16 →
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Bueno saber
- Privado: la generación es local.
backdrop-filternecesita un fondo colorido o una imagen detrás del elemento para mostrar el efecto.- Herramientas relacionadas: Box-Shadow Generator, CSS Gradient Generator.