DevVault
100% on-device
All tools

CSS gradient generator

Drag colour stops along a live preview to build a linear, radial or conic gradient, then take it as a CSS declaration, a Tailwind class, a React style object or a standalone SVG for the places CSS gradients cannot reach.

Runs entirely in this tab. What you paste is never sent anywhere.
to right
Colour stops
  • 0%
  • 100%
background: linear-gradient(90deg, #7C3AED 0%, #2DD4BF 100%);