Shader Flow — React Component

A soft animated shader-style background with flowing gradient motion.

Background Effectsgradienthoverbackgroundshadergradientanimationflowingblobsframer-motion

Shader Flow

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

showContent

Show the default built-in foreground content.

cursorReactive

Enable subtle cursor-reactive movement of background blobs.

intensity

Control the intensity of cursor-reactive movement.

Generated JSX

Copy this into your page.

<useRef
  showContent={true}
  cursorReactive={true}
  intensity="medium"
/>

Animation effects

gradienthover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Shader Flow

Shader Flow renders a soft animated background with flowing gradient motion that simulates a GLSL shader aesthetic using pure CSS. Gradient blobs shift position, opacity, and hue over time with CSS keyframe animation, blending into an organic, fluid movement pattern. No WebGL or canvas API — the shader-like appearance is achieved entirely with CSS gradients and animation. Works as a full-viewport background or a contained section fill.

Common use cases

Hero and landing page backgrounds
Card and panel gradient fills
Atmospheric section dividers
Creative and design tool landing pages