loot.toolsbackground: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18);
Glassmorphism is a UI style where elements look like frosted glass layered over colorful backgrounds. The effect comes from combining a semi-transparent background, a backdrop blur filter, and a subtle border. Apple's macOS and iOS use it heavily, and it's become popular in web design for cards, modals, and navigation bars.
The blur slider controls how strongly the background gets blurred through the element (using backdrop-filter). Opacity sets how transparent the glass tint is. Saturation boosts or mutes the colors showing through. The border adds a subtle edge that helps the glass shape stand out. All four properties work together to create the frosted look.
backdrop-filter works in all modern browsers. The -webkit- prefix is included for Safari compatibility. For the best glassmorphism effect, make sure there's something colorful behind the glass element (gradients, images, or other UI). A slight border and shadow help the glass shape pop. Keep the blur between 8px and 20px for a natural frosted look.