Glassmorphism CSS Tutorial

🎨 What is Glassmorphism?

Glassmorphism is a modern UI design trend that creates a frosted glass effect. It combines transparency, blur, and subtle borders to create depth and visual hierarchy while maintaining a clean, elegant aesthetic.

This technique became popular in 2020 and is widely used in modern web and mobile interfaces, particularly in macOS Big Sur and iOS designs.

🔑 Key Properties

The glassmorphism effect relies on four essential CSS properties:

                background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
            

💡 Pro Tip: Always include both backdrop-filter and -webkit-backdrop-filter for better browser compatibility!

📝 Complete Example

Here's a complete CSS class for a glassmorphism card:

                .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    padding: 30px;
}
            

🎯 Blur Intensity Examples

Experiment with different blur values to achieve various effects:

Low Blur
(5px)

Medium Blur
(15px)

High Blur
(25px)

🎨 Design Best Practices

Background Requirements: Glassmorphism works best with colorful or detailed backgrounds. A plain solid color won't showcase the effect properly.

Transparency Balance: Use rgba() values between 0.05-0.25 for the background. Too opaque loses the glass effect; too transparent loses readability.

Border Subtlety: Keep borders light and semi-transparent (rgba with 0.1-0.3 alpha) to maintain the delicate glass appearance.

Contrast for Text: Ensure text has enough contrast against the blurred background. Use white text with text-shadow for better readability.

⚠️ Browser Compatibility

The backdrop-filter property is well-supported in modern browsers, but always include a fallback:

                /* Fallback for older browsers */
background: rgba(255, 255, 255, 0.3);

/* Modern browsers */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
            

🚀 Advanced Techniques

Add Hover Effects: Enhance interactivity with smooth transitions on hover states.

Layering: Stack multiple glass elements with varying opacity levels to create depth.

Color Tints: Add subtle color tints to the background rgba() value to match your design theme.

Combine with Gradients: Use gradient overlays on your background for more dynamic effects.

✨ Glassmorphism in CSS