CSS Gradient Generator
Design linear, radial, and conic gradients with a visual editor.
background: linear-gradient(135deg, #635BFF 0%, #00D4FF 50%, #FF80B5 100%);
bg-[linear-gradient(135deg,_#635BFF_0%,_#00D4FF_50%,_#FF80B5_100%)]
Presets
What is a CSS Gradient Generator?
A CSS gradient generator is a visual editor for the linear-gradient, radial-gradient, and conic-gradient CSS functions. You pick colours, drag sliders, set an angle, and copy the resulting CSS straight into your stylesheet. The alternative is to write the syntax from memory, which only experienced front-end developers tend to do well — the angle convention differs from SVG, the position keywords are fiddly, and multi-stop gradients can be hard to eyeball without preview.
CSS supports three gradient types. Linear gradients blend colours along a straight line at a specified angle. 0deg runs bottom-to-top, 90deg runs left-to-right, 180deg top-to-bottom, 270deg right-to-left — or use keyword shortcuts like to bottom right. Radial gradients emanate from a point (default centre) outward; they are ideal for spotlight effects, glowing orbs, and soft backdrops behind text. Conic gradients sweep colours around a centre point like a colour wheel; they are the right choice for pie charts, loading spinners drawn in pure CSS, and hero backgrounds where the colour rotates.
Good gradients use 2–4 colour stops. More than five and the transitions start looking muddy unless you are deliberately creating a rainbow. Stop positions should be placed where you want the transition midpoint; if you set stops at 0%, 50%, and 100%, the colours change smoothly between each pair. To create hard stops (sudden colour changes, like a flag or barber pole), put two stops at the same percentage.
Accessibility considerations: gradients are decorative and should not carry information that users with colour-blindness cannot perceive. If text sits over a gradient, check the contrast ratio at the darkest part of the gradient, not the average. For hero headlines over gradient backgrounds, a subtle overlay (rgba(0,0,0,0.2)) often helps without dulling the gradient itself.
The tool outputs both plain CSS (background: linear-gradient(...)) and a Tailwind arbitrary-value class. The Tailwind output lets you drop the gradient straight into JSX:className="bg-[linear-gradient(135deg,#635BFF,#00D4FF)]". If you prefer semantic utility classes, copy the CSS into a custom component or @layer components block.
How to use the CSS Gradient Generator
- Pick a type. Linear for most backgrounds, radial for spotlight effects, conic for colour-wheel sweeps.
- Choose an angle. For linear, 90deg is left-to-right, 180deg is top-to-bottom, 135deg is a pleasing diagonal.
- Set colour stops. Add, remove, or recolour stops in the sidebar. Drag the position field to set where each colour peaks.
- Pick a preset. Use one of the curated presets as a starting point if you're out of ideas.
- Copy the CSS or Tailwind class. Click Copy next to whichever output you need and paste it into your stylesheet or component.
Features
- Linear, radial, and conic gradient types.
- Unlimited colour stops with per-stop position control.
- Angle slider (0–360°) for linear and conic.
- Live preview and ready-to-copy CSS and Tailwind output.
- Six curated presets for instant-good-enough starting points.
- Runs in your browser, no signup.
Frequently asked questions
- What's the difference between linear, radial, and conic gradients?
- Linear gradients blend along a straight line at a given angle. Radial gradients emanate from a centre point outward in concentric rings. Conic gradients sweep around a centre point like a colour wheel, which makes them ideal for pie charts and loading spinners.
- How many colour stops should I use?
- Two gives a clean minimal gradient. Three or four creates more visual interest. More than five often looks muddy unless you're deliberately going for a rainbow effect. Stick to two or three for most UI backgrounds.
- Do these gradients work in all browsers?
- Linear and radial gradients have worked in every evergreen browser for years. Conic gradients have universal support since 2022; IE11 does not render them but IE11 is end-of-life and past its final security patch.
- Can I use the output in Tailwind CSS?
- Yes. The Tailwind output uses arbitrary-value syntax like bg-[linear-gradient(...)]. Paste it directly into a className prop. For reusable gradients, add the CSS to a custom component or @layer component block.
- How do I animate a gradient?
- CSS cannot animate the gradient-stops list directly, but you can animate background-position on a larger gradient, or use keyframes that cycle through several hand-built gradients. For smooth colour transitions, overlapping two divs with different gradients and fading between them works well.