CSS Gradient Generator
Build beautiful CSS gradients visually with a live preview. Supports linear and radial gradients with custom colors and angles.
How to Create a CSS Gradient
- 1Choose gradient type: Linear or Radial
- 2Pick your start and end colors using the color pickers
- 3Adjust the angle (for linear) or direction
- 4Copy the CSS code and paste it into your stylesheet
Key Benefits
- Visual color pickers for intuitive design
- Live gradient preview
- Generates clean, cross-browser CSS code
- Supports linear and radial gradients
Frequently Asked Questions
What CSS property is generated?
The tool outputs a background CSS declaration using linear-gradient() or radial-gradient(). You can use it on any element that accepts a background: for a full-page hero use it on the body or a section, for a button use it on the button element, for a card use it on the card container. background-image: works too and lets you layer it with a background-color fallback.
How do I add more than 2 colour stops?
This tool generates 2-stop gradients. To add more stops, copy the output and extend it manually. For example: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899) transitions through three colours. You can also add percentage positions to control where each stop lands: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%).
Are CSS gradients supported in all browsers?
linear-gradient() and radial-gradient() are supported in all evergreen browsers and have been for many years. No vendor prefixes are needed for current versions. If you need to support very old browsers, a solid background-color fallback before the gradient declaration provides a reasonable degraded experience.
When should I use a gradient vs a solid colour?
Gradients add depth and visual movement to backgrounds, hero sections, buttons, and cards — useful when you want to guide the eye or add energy to a design. Use them for decorative purposes rather than functional ones. For accessibility, verify that any text placed over a gradient meets contrast requirements at every point across the transition, not just at the start or end colour.
What is the difference between linear and radial gradients?
A linear gradient transitions colours along a straight line at a specified angle — ideal for horizontal or diagonal backgrounds and banners. A radial gradient radiates outward from a central point in an elliptical or circular pattern — useful for spotlight effects, glowing elements, or circular UI components. Both support multiple colour stops and all CSS colour formats.
Can I apply a gradient to text or borders?
Not directly via the color property, but workarounds exist. For gradient text: set background to your gradient, then add -webkit-background-clip: text and color: transparent. For gradient borders: use a pseudo-element or the border-image property. Both techniques work in modern browsers. Gradient text looks striking on large headings but hurts readability on smaller or body text — use it sparingly.