glassmorphism-toolkit

Use the GlassAppBar component with a blurIntensity parameter such as GlassBlurIntensity.medium (sigma 10). It accepts standard properties like title, leading, and actions, and floats above content with a translucent backdrop blur.

Avoid glass effects on body text containers, form inputs, list items, error messages, and data tables where readability matters. Blur behind small text reduces legibility, and applying blur to 50+ list items severely impacts frame rates.

BackdropFilter blur operations are GPU-expensive, and rendering them on every ListView item compounds the cost per frame. Limit visible glass elements to 3-4 at once, use subtle or light blur for scrolling content, and wrap glass containers in RepaintBoundary.

Use GlassBlurIntensity.light (sigma 6) for cards needing soft separation with readable backgrounds, or subtle (sigma 3) for elements that scroll. Reserve strong (15) and extreme (25) for static hero sections since higher sigma values cost more GPU time.

Animating blur sigma is not recommended because sigma changes trigger expensive re-computation of the backdrop filter each frame. Instead, animate opacity or scale, and keep the blur intensity fixed during transitions.