CSS Gradient Generator
Color stops
CSS
linear-gradient(90deg, #2563eb 0%, #db2777 100%)
Presets
CSS gradient maker for linear, radial, and conic fills
Build a background you can paste into CSS. The preview uses the same string you copy, so a linear 90deg fade, a radial circle, or a conic sweep should match in the browser that renders the page.
Invalid HEX on a stop is ignored until it parses. Stops are clamped to 0–100%. The generator does not add vendor prefixes; modern browsers understand these functions.
Frequently asked questions
- What CSS does the gradient generator output?
- It writes standard linear-gradient, radial-gradient, or conic-gradient functions you can paste into a stylesheet. Copy either the function or a full background declaration.
- Can I add transparent stops?
- Stops use HEX. 8-digit HEX with alpha is accepted by the shared parser; the live preview uses the serialized CSS from those stops.
- Is Gradient Generator different from CSS Gradient Generator?
- No. Both names describe this tool. There is one URL so search engines are not split across duplicate pages.
- Why is there a stop limit?
- You can use between 2 and 8 stops. That covers typical UI backgrounds without turning the editor into a freeform drawing app.
- Does reverse change the CSS?
- Yes. Reverse maps each stop to 100% minus its position so the preview and the copied CSS stay identical.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
Use cases
- For Designers — Pick colors, check contrast, and build palettes and gradients.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.