Flutter Glassmorphism

Creating frosted glass effects with blur and transparency

💎 What is Glassmorphism?

Glassmorphism creates stunning frosted glass effects using background blur, transparency, and subtle borders. This modern design trend produces elegant, semi-transparent UI elements that appear to float above colorful backgrounds, creating depth and visual hierarchy while maintaining a clean, sophisticated aesthetic that's popular in contemporary interfaces. 


ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.white.withOpacity(0.3)),
      ),
    ),
  ),
)

Output:

Glassmorphism Elements

🌫️

Backdrop Blur

Blur the background behind elements 

BackdropFilter(
  filter: ImageFilter.blur(
    sigmaX: 10, 
    sigmaY: 10,
  ),
)
👻

Transparency

Semi-transparent backgrounds 

color: Colors.white
  .withOpacity(0.2)
🔲

Subtle Border

Light borders for definition 

border: Border.all(
  color: Colors.white
    .withOpacity(0.3),
)
✨

Soft Shadow

Gentle shadows for depth 

boxShadow: [
  BoxShadow(
    color: Colors.black
      .withOpacity(0.1),
  ),
]

🔹 Basic Glass Container

Create a simple glassmorphic container: 

import 'package:flutter/material.dart';
import 'dart:ui';

class GlassContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(
          width: 300,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.2),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: Colors.white.withOpacity(0.3),
              width: 1.5,
            ),
          ),
          child: Center(
            child: Text(
              'Glass Effect',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Glass Effect

🔹 Glass Card with Content

Create a glassmorphic card with text and icons: 

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 320,
      padding: EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Colors.white.withOpacity(0.3),
            Colors.white.withOpacity(0.1),
          ],
        ),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: Colors.white.withOpacity(0.3),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Icon(Icons.star, color: Colors.white, size: 40),
          SizedBox(height: 16),
          Text(
            'Premium Card',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 8),
          Text(
            'Beautiful glassmorphic design',
            style: TextStyle(
              color: Colors.white.withOpacity(0.8),
              fontSize: 14,
            ),
          ),
        ],
      ),
    ),
  ),
)

Output:

⭐
Premium Card
Beautiful glassmorphic design

🔹 Glass Button

Create an interactive glassmorphic button: 

class GlassButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  GlassButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: InkWell(
          onTap: onPressed,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.white.withOpacity(0.3),
                  Colors.white.withOpacity(0.1),
                ],
              ),
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                color: Colors.white.withOpacity(0.4),
              ),
            ),
            child: Text(
              text,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output:

🔹 Glass Navigation Bar

Create a glassmorphic bottom navigation: 

Positioned(
  bottom: 20,
  left: 20,
  right: 20,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(25),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        height: 70,
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.2),
          borderRadius: BorderRadius.circular(25),
          border: Border.all(
            color: Colors.white.withOpacity(0.3),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.home, color: Colors.white, size: 30),
            Icon(Icons.search, color: Colors.white, size: 30),
            Icon(Icons.favorite, color: Colors.white, size: 30),
            Icon(Icons.person, color: Colors.white, size: 30),
          ],
        ),
      ),
    ),
  ),
)

Output:

🏠 🔍 ❤️ 👤

🔹 Glassmorphism Best Practices

Design Guidelines:

  • Colorful backgrounds: Use gradients or images behind glass elements
  • Blur intensity: Use sigmaX and sigmaY values between 5-15
  • Low opacity: Keep background opacity between 0.1-0.3
  • Subtle borders: Use white borders with 0.2-0.4 opacity
  • Gradient overlays: Add subtle gradients for depth
  • Performance: Use BackdropFilter sparingly as it's expensive 
// Recommended glassmorphism configuration
final glassDecoration = BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.3),
      Colors.white.withOpacity(0.1),
    ],
  ),
  borderRadius: BorderRadius.circular(20),
  border: Border.all(
    color: Colors.white.withOpacity(0.3),
    width: 1.5,
  ),
);

final glassBlur = ImageFilter.blur(
  sigmaX: 10,
  sigmaY: 10,
);

🧠 Test Your Knowledge

Which widget creates the blur effect in glassmorphism?