CSS Gradient Generator

Visual CSS gradient generator for linear, radial and conic gradients: add color stops, tweak the angle and copy ready-to-use CSS. Perfect for backgrounds, buttons and hero sections, free in your browser.

Repeat

각도: 135deg

Color Stop

0%

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Embed

<iframe src="https://devtools.patrache.studio/en/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="CSS Gradient Generator — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/en/generators/css-gradient/">CSS Gradient Generator</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Powered by Patrache Studio DevTools

Last updated: 2026 · Free online tool

What is CSS Gradient Generator?

Visual CSS gradient generator for linear, radial and conic gradients: add color stops, tweak the angle and copy ready-to-use CSS. Perfect for backgrounds, buttons and hero sections, free in your browser.

How to Use

1
Select Type— Choose the gradient type (linear, radial, conic).
2
Adjust Color Stops— Adjust the color and position of each color stop.
3
Preview— Check the result in real-time in the preview.
4
Copy CSS Code— Copy the CSS code to the clipboard using the 'Copy' button.

Related Tools

CSS Box Shadow GeneratorCSS box-shadow generator with offset, blur, spread, color and inset controls and a live preview of the shadow. Copy ready-to-use box-shadow CSS for any element, free in your browser.

CSS Border Radius GeneratorCSS border-radius generator with eight independent corner handles and sliders and a live preview of the rounded shape. Copy ready-to-use border-radius CSS for any element, free in your browser.

Color ConverterColor converter between HEX, RGB, HSL and OKLCH codes, with the WCAG contrast ratio for any two colors. Check accessibility compliance while you pick palettes, free in your browser.

SVG Wave GeneratorFree online SVG wave generator with a visual editor for smooth wave shapes. Adjust amplitude, colors, and layers, apply ready-made presets, then copy the CSS and SVG code for backgrounds and dividers.

Frequently Asked Questions

There is no limit, but 2–6 is typical. Too many may affect performance.

Yes. Enable the 'Repeat' checkbox to add the repeating prefix.

Five presets are provided: Sunset, Ocean, Forest, Midnight, and Rainbow.

Currently, only pure CSS is output. Tailwind conversion is planned for a future update.

No. All processing is done in the browser.

This site uses cookies for better experience and advertising. Learn more