Stripe Gradient forms broad, flowing folds of colour. It can sit behind a headline or serve as a slow-moving section background. Scale sets the size of the folds, flow depth increases their movement, and softness smooths the transitions. Angle turns the composition without changing the page layout. Adjust the white, ink, silver and graphite colours to suit the surrounding design. Reduce speed and grain for a quieter surface behind longer text.
How this shader works
Stripe Gradient forms broad, flowing folds of colour that move slowly across the canvas. It can sit behind a headline or serve as a section background. Scale sets the size of the folds, Flow depth increases their movement and Softness smooths the transitions. Angle turns the composition, and four colours set the palette.
Tips
- Lower Speed and Grain for a quieter surface behind longer text.
- Angle turns the folds without changing the page layout.
- Raise Softness for smoother blends between colours.
- Replace White, Ink, Silver and Graphite with your brand colours.
Questions
How do I make a flowing gradient like the Stripe website?
Open Stripe Gradient, choose four colours and set Scale and Flow depth. Export it as an HTML file or a React or Svelte component and place it behind your hero.
Can I use it as a video?
Yes. It can be exported as an MP4 video as well as code.
Preview and customize in the browser. Exports require membership.