CSS Gradient Generator
Build a linear gradient with editable colour stops and transparency, then copy or download the exact CSS shown in the preview. Settings stay in this browser.
Create linear gradients with two to eight stops. Everything stays in this browser tab and refresh clears your draft.
Direction: 90° → CSS starts at the bottom and increases clockwise (90° points right).
Equal positions are valid hard transitions. Stops are ordered by position; tied stops retain this list order, which the Move buttons can change. Transparency shows over the checkerboard.
How to make a gradient
- Edit each stop's hex colour, opacity and position. Equal positions make a deliberate hard transition.
- Set the angle: 0 degrees points upward in CSS, 90 degrees points right, 180 degrees downward and 270 degrees left.
- Copy the generated class or download gradient.css. The preview-only background and checkerboard are not exported.
Worked example
At 90 degrees, a red stop at 0% and a blue stop at 100% makes a left-to-right transition. A stop with zero opacity still keeps its RGB colour, so raising opacity again restores that selected colour.
Output rules and limits
Output is a fixed .gradient class with a background-color fallback followed by linear-gradient. Stops are ordered by position; tied stops preserve their list order. This tool makes only linear gradients, not radial or conic gradients, animations or image exports. Browser colour interpolation can vary slightly between rendering engines.
What should we improve next?
Help shape the next update to CSS gradient generator. Tell us what would make it better for you.
Prefer email? feedback@tooltulip.com