CSS Gradient Generator — Linear & Radial Gradient Code
Type
Angle
deg
Shape
Color stops
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); A visual builder for CSS gradients. Pick linear or radial, set the angle, drop in as many color stops as you need, and copy the ready-to-paste background code. The preview updates as you drag, so you can dial in a gradient without hand-editing a single hex value.
How it works
- 1 Choose linear or radial Toggle the gradient type. Linear runs the colors along a straight line at a set angle; radial spreads them out from the center as a circle or ellipse.
- 2 Set colors and stops Click a color swatch to change its shade, drag the slider to move where each color sits, and use Add stop to layer in more colors. Remove any stop you do not need.
- 3 Copy the CSS The background declaration updates live below the preview. Hit Copy and paste it straight into your stylesheet.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What is the difference between a linear and a radial gradient?
- A linear gradient blends colors along a straight line — you control the direction with an angle in degrees. A radial gradient blends outward from a center point in a circle or ellipse. Linear is the common choice for buttons and hero backgrounds; radial suits spotlights, glows, and soft vignettes.
- How many color stops can I add?
- As many as you like. Two stops give a simple fade; three or more let you build multi-color blends and sharp color bands. Each stop has its own color and a position from 0% to 100% along the gradient.
- What does the angle value mean?
- For linear gradients the angle sets the direction of the blend. 0deg points straight up, 90deg points to the right, 180deg points down. So 90deg fades left-to-right and 45deg runs diagonally from the bottom-left corner.
- Will this gradient work in every browser?
- Yes. Plain linear-gradient() and radial-gradient() have been supported in every modern browser for years, with no vendor prefix needed. The code you copy is standard CSS you can drop into any project.
- Can I use a gradient as text color or a border?
- Yes, with a small trick. For gradient text, set the gradient as background, then add background-clip: text and color: transparent. For borders, use border-image or a gradient background behind a slightly smaller inner element. The code here gives you the gradient itself to reuse in those techniques.
- Is my gradient sent to a server?
- No. The builder runs entirely in JavaScript in your browser. Nothing you pick is uploaded, logged, or stored anywhere.