W
WhiteArray
Sign In

Cross-Platform Flutter Glassmorphism Generator

Visually generate frosted glass and blur effects and export code for Flutter.

Cross-Platform Glassmorphism

Preview Canvas
CSSTailwindReact NativeFlutterSwiftUIAndroid
ClipRRect(
  borderRadius: BorderRadius.circular(16.0),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2),
        border: Border.all(
          color: Colors.white.withOpacity(0.3),
          width: 1.0,
        ),
        borderRadius: BorderRadius.circular(16.0),
      ),
      child: // children
    ),
  ),
)

Glass Properties

16px
20%
30%
16px

The Ultimate Flutter Glassmorphism Generator

Glassmorphism is a UI design trend that emphasizes light or dark objects placed on top of vibrant backgrounds. The core feature of this trend is a frosted-glass effect (background blur) allowing the background to bleed through the elements. While achieving this in CSS is relatively straightforward using backdrop-filter, native frameworks handle this entirely differently. This generator translates the visual glass properties into production-ready Flutter code.

Glassmorphism in Flutter

In Flutter, glassmorphism is achieved using a combination of the BackdropFilter widget, the ui.ImageFilter.blur filter, and a child Container with a semi-transparent color. Because Flutter's blur sigma values don't map 1:1 with CSS pixel blur, this generator automatically mathematically scales your desired CSS blur into the appropriate sigmaX and sigmaY values for Flutter.

Related Tools

CSS Shadow GeneratorCSS Gradient GeneratorCross-Platform Layout Builder