What is a CSS Gradient?
CSS gradients create smooth transitions between two or more colors using pure CSS — no images needed. CSS supports linear (straight line), radial (circular/elliptical), and conic (color wheel) gradients. This generator lets you create gradients visually, choose from 24 presets, control direction and color stops, and copy the CSS code.
Common use cases
- Creating background gradients for hero sections and banners
- Designing button hover effects with gradient transitions
- Building gradient text effects using background-clip
- Creating gradient borders and overlay effects
- Generating gradient CSS for Tailwind arbitrary values
How to use
- 1Choose Linear, Radial or Conic, or start from a preset or Random.
- 2Adjust the angle or position and edit the colour stops: colour, position, add or remove.
- 3Copy the CSS property, CSS class or Tailwind class (⌘↵ copies the CSS).
Frequently asked questions
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line (top to bottom, left to right, or any angle). Radial gradients transition from a center point outward in a circle or ellipse. Conic gradients rotate colors around a center point like a color wheel.
Do CSS gradients affect performance?
CSS gradients are rendered by the GPU and are very efficient — much better than gradient images. They scale perfectly at any resolution, work on all modern browsers, and don't add any HTTP requests. They're a best practice over gradient images.