CSS Gradient Generator Online
Build beautiful CSS linear and radial gradients visually. Add color stops, adjust positions, choose a direction, and copy the ready-to-use CSS code in one click. No signup, runs entirely in your browser.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);How the CSS Gradient Generator Works
- 1Choose Linear or Radial gradient type — the live preview updates instantly.
- 2For linear gradients, pick a direction — right, bottom, diagonal, or any preset angle.
- 3Click each color swatch to change a color stop. Drag the position slider to move it along the gradient.
- 4Click Copy CSS to copy the complete
background:declaration, ready to paste into any stylesheet.
CSS Gradient Syntax Reference
The linear-gradient() function takes a direction or angle followed by two or more color stops. Each stop specifies a color and an optional position percentage. The radial-gradient() function accepts a shape (circle or ellipse), size keywords, and the same color stop syntax.
Tips for CSS Gradients
Diagonal Gradients
Use 135deg or 45deg for a diagonal effect. to bottom right is equivalent to approximately 135deg and adjusts automatically to the element's aspect ratio.
Hard Color Stops
Place two stops at the same position to create a sharp color change with no blend. Example: #red 50%, #blue 50% creates a half-and-half split.
Repeating Gradients
Use repeating-linear-gradient() or repeating-radial-gradient() to tile the pattern. Define the stops for one tile and the browser repeats them automatically.
Layering Gradients
You can stack multiple gradients as a comma-separated list in the background property. The first gradient in the list renders on top.
Performance
CSS gradients are painted by the GPU and cost nothing in HTTP requests. They are more performant than gradient image files and infinitely scalable.
Accessibility
If you use a gradient behind text, ensure sufficient contrast ratio between the text color and the darkest (or lightest) part of the gradient using a contrast checker.
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line in a specified direction (e.g. left-to-right, top-to-bottom, or any angle). A radial gradient radiates from a central point outward in a circular or elliptical pattern. Linear gradients are more common for backgrounds and banners; radial gradients work well for spotlight effects and circular elements.
Can I use more than two colors in a CSS gradient?
Yes — CSS gradients support any number of color stops. Click 'Add Stop' to insert additional colors at any position between 0% and 100%. Multiple stops let you create multi-color gradients like rainbows or branded color transitions.
How do I use the copied CSS in my code?
Paste the output directly into a CSS rule's background property. Example: .hero { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }. The value works in all modern browsers without prefixes. For very old browser support (IE 10+), you can add a -webkit- prefixed version.
What do the color stop percentages mean?
Each percentage is the position along the gradient where that color is at full strength. A stop at 0% starts at the very beginning (left for 90deg), 50% is exactly the middle, and 100% is the end. Stops between two percentages blend smoothly between the two colors.
Can I create a transparent gradient?
Yes — use a color with an alpha value. In a color picker, choose a partially transparent color. You can also manually edit the CSS output to use rgba() values, e.g. linear-gradient(90deg, rgba(102, 126, 234, 0) 0%, rgba(102, 126, 234, 1) 100%) for a fade-in effect.
Is this tool free and private?
Yes. The gradient builder runs entirely in your browser. No color values, gradient data, or any other information is sent to a server. All processing is done locally in JavaScript.