Flutter package

flutter_shaders_ui

GPU-accelerated GLSL shader effects for Flutter UI — ten drop-in widgets, zero dependencies.

v1.1.223.2k / month40 likesMIT10 effectsFlutter SDK only

Effects reference

Every effect with its full parameter table and a working example — aurora, fire, glass, glow, pulse, ripple, shimmer, snow, water and waves.

source: doc/README.md

Backgrounds

WaveBackground

Animated wave gradient background. Flowing, organic wave patterns blend color1 into color2 along a vertical gradient that undulates with the waves — ideal for full-screen backgrounds, card headers or splash screens. This is the only effect rendered as a background behind its child; every other effect draws as a transparent overlay.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered on top of the waves
`color1`	`Color`	`0xFF1A237E` (dark blue)	Primary (top) color
`color2`	`Color`	`0xFF00BCD4` (cyan)	Secondary (bottom) color
`amplitude`	`double`	`0.3`	Wave height. Range: 0.0 (flat) – 1.0 (dramatic)
`frequency`	`double`	`2.0`	Wave density. Range: 0.0 (smooth) – 5.0 (dense ripples)
`speed`	`double`	`1.0`	Animation speed multiplier
`enabled`	`bool`	`true`	Toggle shader on/off. When false, renders only child

Full-screen backgrounddart

Scaffold(
  body: WaveBackground(
    color1: const Color(0xFF0D1B2A),
    color2: const Color(0xFF1B263B),
    amplitude: 0.2,
    speed: 0.6,
    child: SafeArea(
      child: YourContent(),
    ),
  ),
)

Tips & performance

Use low amplitude (0.1–0.2) and low speed (0.3–0.5) for subtle, ambient backgrounds
Use high frequency (3.0–5.0) for dense, water-like ripples
Combine with GlowOrb for extra depth
Wrap in ClipRRect when using inside cards or bounded containers

Backgrounds

AuroraEffect

Animated aurora borealis effect. Flowing, translucent curtain-like bands drift with domain-warped noise, rendered as a transparent overlay.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the aurora
`color1`	`Color`	`0xFF00E676` (bright green)	Primary aurora color
`color2`	`Color`	`0xFFAA00FF` (vivid purple)	Secondary aurora color
`intensity`	`double`	`0.6`	Glow intensity. Range: 0.0 – 1.0
`speed`	`double`	`1.0`	Animation speed multiplier
`enabled`	`bool`	`true`	Toggle shader on/off

Dark cosmic backgrounddart

Container(
  color: const Color(0xFF0A0A0A),
  child: AuroraEffect(
    color1: const Color(0xFF00E676),
    color2: const Color(0xFF7C4DFF),
    intensity: 0.8,
    child: YourContent(),
  ),
)

Heads up

speed is clamped internally to the range 0.1–5.0.

Tips & performance

Always place on a dark background (Color(0xFF0A0A0A) or similar) — aurora is most visible on dark surfaces
Use intensity: 0.3–0.5 for subtle ambient overlays, 0.7–1.0 for dramatic effect
Works great as a header/hero section background with gradient fade at the bottom
Combine with a LinearGradient fade at the bottom to blend into your content area

Backgrounds

FireEffect

Animated fire rising from the bottom. Layered noise functions (FBM, turbulence) create organic, flickering flames with ember sparks, rendered as a transparent overlay.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the flames
`intensity`	`double`	`0.6`	Flame height and intensity. 0.0 = embers only, 1.0 = inferno
`speed`	`double`	`1.0`	Animation speed. < 1.0 = slow smolder, > 1.0 = rapid flicker
`color1`	`Color`	`0xFFFFEB3B` (bright yellow)	Inner flame color
`color2`	`Color`	`0xFFFF5722` (deep orange)	Outer flame color
`enabled`	`bool`	`true`	Toggle shader on/off

Game-style buttondart

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: SizedBox(
    height: 56,
    child: FireEffect(
      intensity: 0.4,
      speed: 0.8,
      child: Container(
        color: const Color(0xFF2D0A00),
        child: Center(child: Text('POWER UP')),
      ),
    ),
  ),
)

Tips & performance

Use a dark warm background (Color(0xFF1A0500)) for best visibility
Low intensity (0.2–0.3) creates a cozy warm glow, high (0.7–1.0) creates an inferno
Custom color1/color2 can create blue fire, green fire, etc.
Wrap in ClipRRect to contain flames within cards/buttons
Flames rise from the bottom — position content accordingly

Backgrounds

WaterEffect

Animated water surface with caustic light patterns. Combines caustics, wave distortion, optional foam, depth-based color gradients and surface highlights for a realistic top-down water look — ocean and pool themed backgrounds, cards and splash screens.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Optional child widget rendered on top of the water effect
`color1`	`Color`	`0xFF26C6DA`	Shallow water color (bright, near-surface areas). Defaults to a light cyan/turquoise
`color2`	`Color`	`0xFF0D47A1`	Deep water color (dark, deep areas). Defaults to a deep navy blue
`speed`	`double`	`1.0`	Animation speed multiplier. 1.0 is normal, 0.5 is half speed
`depth`	`double`	`0.5`	Water depth factor. Range: 0.0 (shallow pool) to 1.0 (deep ocean). Controls how much the color darkens and how the caustics distribute
`waveIntensity`	`double`	`0.5`	Wave distortion intensity. Range: 0.0 (calm) to 1.0 (stormy)
`causticIntensity`	`double`	`0.6`	Caustic light pattern intensity. Range: 0.0 (none) to 1.0 (bright). This is the main visual feature
`foamAmount`	`double`	`0.0`	Foam/froth amount. Range: 0.0 (no foam) to 1.0 (heavy foam). Adds white frothy patches for an ocean/surf look
`enabled`	`bool`	`true`	Whether the shader effect is active. When false, only child is rendered (no GPU cost)

Ocean surfacedart

WaterEffect(
  color1: Color(0xFF00BCD4), // shallow turquoise
  color2: Color(0xFF0D47A1), // deep navy
  causticIntensity: 0.7,
  child: Center(child: Text('Dive In', style: TextStyle(color: Colors.white))),
)

depth, waveIntensity, causticIntensity and foamAmount are clamped internally to 0.0–1.0. Like every effect, enabled: false renders only child with no GPU cost.

Overlays

GlassEffect

Frosted glass / glassmorphism overlay. Noise-based frost, crystalline voronoi textures, internal refractions and specular highlights create a tinted, semi-transparent surface. Because Flutter fragment shaders cannot sample child pixels, the frosted look is entirely procedural — it does not blur what is behind it.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the glass
`blurAmount`	`double`	`0.5`	Simulated blur intensity. 0.0 = clear, 1.0 = heavy diffusion
`frost`	`double`	`0.4`	Frost noise amount. 0.0 = clear glass, 1.0 = heavy frost
`opacity`	`double`	`0.3`	Overall glass overlay opacity. Range: 0.0 – 1.0
`tint`	`Color`	`Colors.white`	Tint color applied to the glass surface
`enabled`	`bool`	`true`	Toggle shader on/off

Glassmorphism carddart

ClipRRect(
  borderRadius: BorderRadius.circular(24),
  child: GlassEffect(
    frost: 0.5,
    opacity: 0.35,
    tint: Colors.white,
    child: Container(
      padding: const EdgeInsets.all(24),
      child: Column(
        children: [
          Text('Frosted Glass Card'),
          Text('Content behind glass'),
        ],
      ),
    ),
  ),
)

Tips & performance

Always wrap in ClipRRect to clip the effect to your desired shape
This is a procedural frost simulation, not a real blur — it doesn't blur the content behind it
For real backdrop blur, combine with Flutter's BackdropFilter
Use low frost (0.1–0.2) and low opacity (0.05–0.1) as a subtle texture overlay on gradients
Use high frost (0.5+) and opacity (0.3+) for visible glassmorphism cards
Works great on dark backgrounds with colorful content underneath

Overlays

ShimmerEffect

Sweeping shimmer / shine. A diagonal highlight band sweeps across the surface with subtle sparkle noise and a soft halo, looping continuously.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the shimmer
`color`	`Color`	`0x40FFFFFF` (semi-transparent white)	Shimmer highlight color
`angle`	`double`	`0.5` (~28 degrees)	Sweep angle in radians. 0.0 = horizontal, π/4 = diagonal, π/2 = vertical
`speed`	`double`	`1.0`	Animation speed multiplier
`width`	`double`	`0.3`	Shimmer band width. Range: 0.05 (thin) – 1.0 (wide diffused)
`enabled`	`bool`	`true`	Toggle shader on/off

Heads up

The alpha channel of color is not used directly — the shader computes alpha from the band shape. Use a bright, opaque color for best results.

Loading skeletondart

ShimmerEffect(
  speed: 1.0,
  width: 0.15,
  child: Column(
    children: List.generate(3, (_) => SkeletonLine()),
  ),
)

Tips & performance

Use color: Colors.white with narrow width (0.1–0.15) for a subtle highlight sweep
Use color: Color(0xFFFFD700) for a golden/premium shimmer effect
Use slow speed (0.5–0.7) for premium/luxury feel, fast (1.5+) for loading indicators
Wrap text directly to create shimmering titles
Combine with gradient containers for featured banners and cards
Great for: loading placeholders, premium badges, titles, featured content

Overlays

SnowEffect

Animated snow particles falling with parallax depth. Multiple layers give natural depth perception, with organic wind turbulence on each flake.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the snow
`density`	`double`	`0.5`	Snow particle density. 0.0 = sparse, 1.0 = blizzard
`speed`	`double`	`1.0`	Fall speed multiplier. Range: 0.1 – 2.0
`size`	`double`	`0.5`	Snowflake size multiplier. Range: 0.0 – 1.0
`enabled`	`bool`	`true`	Toggle shader on/off

Seasonal backgrounddart

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Color(0xFF0D47A1), Color(0xFF1A237E)],
    ),
  ),
  child: SnowEffect(
    density: 0.7,
    speed: 1.0,
    child: SafeArea(child: WinterContent()),
  ),
)

Tips & performance

Use very low density (0.1–0.2) and speed (0.2–0.4) for a subtle ambient effect that doesn't distract
Use high density (0.7+) for seasonal/festive screens
Works best on dark blue, dark purple, or black backgrounds
Combine with WaveBackground for a winter ocean scene
Place as a Positioned.fill in a Stack for fullscreen overlay without affecting layout
Great for: seasonal UI, splash screens, winter-themed features, ambient decoration

Overlays

PulseEffect

Pulsing glow effect — a breathing, radial glow that expands and contracts from the center with expanding pulse rings, rendered as a transparent overlay.

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content rendered behind the pulse
`color`	`Color`	`0xFF2196F3` (Material Blue)	Glow color
`speed`	`double`	`1.0`	Pulse speed multiplier. Higher = faster
`intensity`	`double`	`0.5`	Glow intensity. Range: 0.0 – 1.0
`enabled`	`bool`	`true`	Toggle shader on/off

Unread indicatordart

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: PulseEffect(
    color: Colors.red.withValues(alpha: 0.4),
    speed: 0.4,
    intensity: 0.15,
    child: NotificationCard(isUnread: true),
  ),
)

Heads up

speed is clamped internally to the range 0.1–5.0.

Tips & performance

Always wrap in ClipRRect to contain the glow within bounds
Use low intensity (0.1–0.2) and low speed (0.3–0.5) for subtle breathing indicators
Use high intensity (0.6–1.0) for dramatic attention-grabbing effects
Great for: unread notifications, CTA buttons, achievement badges, live indicators
Combine with colored containers — the pulse adds a radial glow on top

Interactive

RippleEffect

Tap-triggered ripple. Concentric rings expand from the tap point with a smooth animation, plus an optional onTap callback.

Parameter	Type	Default	Description
`child`	`Widget`	required	Widget to wrap with ripple (required)
`color`	`Color`	`Colors.white`	Ripple wave color
`duration`	`Duration`	`800ms`	Ripple animation duration
`intensity`	`double`	`1.0`	Ripple strength. Higher = more visible rings
`onTap`	`VoidCallback?`	`null`	Callback invoked on tap (alongside ripple)

Heads up

RippleEffect is the only effect without an enabled parameter — the shader activates only while the tap animation runs, so it is idle-cost-free between taps.

Interactive carddart

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: RippleEffect(
    color: const Color(0xFF6366F1),
    intensity: 0.7,
    duration: const Duration(milliseconds: 600),
    onTap: () => navigateToDetail(),
    child: GlassCard(
      child: Row(
        children: [
          Icon(Icons.explore),
          Text('Backgrounds'),
        ],
      ),
    ),
  ),
)

Tips & performance

Always wrap in ClipRRect when using inside cards/buttons to clip the ripple to shape
Use bright colors on dark backgrounds, darker on light backgrounds
Rapid successive taps are handled — animation resets on each tap
The onTap callback fires immediately alongside the visual ripple
Use shorter duration (400–600ms) for snappy buttons, longer (800–1000ms) for full-screen areas
Works as an enhanced replacement for InkWell with a shader-powered visual effect

Interactive

GlowOrb

Positionable glowing orb with volumetric glow, halo and a breathing/pulsing animation. Three modes: GlowOrb (static), GlowOrb.bouncing (screensaver) and GlowOrb.draggable (user-controlled). The default color varies by mode: cyan (static), purple (bouncing), orange (draggable).

Parameter	Type	Default	Description
`child`	`Widget?`	`null`	Content behind the orb
`color`	`Color`	varies by mode	Orb glow color
`radius`	`double`	`0.15`	Orb size as fraction of widget. Typical: 0.05 – 0.3
`glowIntensity`	`double`	`1.0`	Brightness multiplier
`pulseSpeed`	`double`	`2.0`	Breathing animation speed (rad/s)
`enabled`	`bool`	`true`	Toggle shader on/off

Mode-specific parameters: the static and draggable constructors take position (Offset, default Offset(0.5, 0.5)) — a normalized position, 0–1 on both axes; draggable uses it as the starting point. The bouncing constructor takes speed (double, default 0.3) — bounce movement speed as a fraction per second.

All three modesdart

GlowOrb(
  position: const Offset(0.5, 0.5),
  color: const Color(0xFF00E5FF),
  radius: 0.15,
  glowIntensity: 1.0,
  pulseSpeed: 2.0,
  child: YourContent(),
)

GlowOrb.bouncing(
  color: const Color(0xFF8B5CF6),
  radius: 0.15,
  glowIntensity: 1.0,
  speed: 0.3,
  child: YourContent(),
)

GlowOrb.draggable(
  color: const Color(0xFFFF6B00),
  radius: 0.12,
  glowIntensity: 1.2,
  child: YourContent(),
)

Tips & performance

Use .bouncing() with low speed (0.05–0.1) and low glowIntensity (0.2–0.4) for subtle ambient light
Use .draggable() for interactive demos, onboarding, or playful UI elements
Multiple static orbs with different colors create beautiful light compositions
Combine with WaveBackground for extra depth in dark UIs
The orb is transparent — it composites nicely on any dark background

PreviousOverview NextAPI reference

Let's make something together.

If you have any questions about a new project or other inquiries, feel free to contact us. We will get back to you as soon as possible.