Playground · Backgrounds

Mesh Gradient

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

A soft gradient between four colours that slowly breathe and drift: a calm backdrop that text can sit on.

Version 1.0.2 · What changed
  • 1.0.2 2026-10-06 It now holds still on its own when the platform asks for reduced motion (MediaQuery.disableAnimationsOf), so passing paused: for that reason is no longer needed.
  • 1.0.1 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.0.0 2026-10-01 First release.

Parameters

How gently the colours blend; low values keep each colour in its own region.

How fast the colours drift. 0 holds them still.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Mesh Gradient Component to this Flutter app. Call get_export with componentId "mesh-gradient" and parameters {"colorA":"FDE68A","colorB":"F9A8D4","colorC":"A5B4FC","colorD":"99F6E4","softness":0.6,"speed":0.15}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/mesh-gradient?colorA=FDE68A&colorB=F9A8D4&colorC=A5B4FC&colorD=99F6E4&softness=0.6&speed=0.15)