More in Forge (4)
Forge · Gradients
CSS Gradient Generator
Multi-stop linear and radial gradients. Drag positions, pick colors, paste the CSS where you need it.
How to use CSS Gradient Generator
- Choose Linear or Radial at the top of the settings panel.
- For linear, drag the Angle slider anywhere from 0° to 360°. For radial, pick Ellipse or Circle under Shape.
- In Stops, click a swatch to choose its color and drag its slider to place it from 0% to 100%. Use + Add stop for more colors and × to remove one. Two stops always remain.
- Or start from a preset: Mint dawn, Aurora, or Ember.
- Press Copy CSS to copy the full background: declaration and paste it into your stylesheet.
01 · Real-world fits
Common use cases
- A hero section background that runs from your brand color to a darker shade at 135°
- A soft radial glow behind a product image, using a circle that fades into the page background color
- A hard-edged split or stripes, made by putting two stops at the same position
- Button and badge fills with a two-color brand gradient in plain CSS, no image file
- A fade to transparent for text over a photo, by typing rgba(0,0,0,0.7) into a stop's text box
- Trying several background directions for a landing page before opening a design tool
02 · The honest pitch
Why CSS Gradient Generator?
Each stop is one row: a color picker, a position slider, and a text box that takes any CSS color, including rgba() for transparency. The output is a complete background: declaration with the stops sorted by position, so what you see in the preview is what you paste. The type, angle, and first two colors are kept in the page URL, so a link reopens the same starting point.
03 · Edge cases