Skip to main content

CSS Gradient Builder

v1.0.1

Build and preview CSS linear and radial gradients with a visual editor.

Builds and previews CSS linear and radial gradients with a visual stop editor — add colour stops, set positions in %, and choose direction angle or radial shape.

How to use
  • →Click the gradient bar to add colour stops; drag them to reposition.
  • →Use the direction picker for linear gradients or the radial shape selector.
  • →Copy the background: linear-gradient(...) or radial-gradient(...) value.
0%
100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);