What CSS gradient types does this tool support?

Linear, radial, and conic. Linear uses an angle in degrees. Radial picks circle or ellipse plus a position. Conic uses a from-angle and position.

How do color stops work?

Each stop is a hex color plus an optional position from 0% to 100%. Leave the position empty to let the browser space stops evenly. You need at least two valid colors.

Should I copy the full background rule or just the gradient?

Use Copy background for `background: linear-gradient(...);` ready to paste. Use Copy value when you need the function alone, for example inside `background-image` or a custom property.

Can I use transparent or 8-digit hex?

Yes. Enter #rrggbbaa (or pick a solid color and edit the hex). Invalid hex values are skipped until fixed.

Does my input leave the device?

No. The CSS Gradient Generator runs entirely in your browser. Colors and settings are not uploaded or stored on a server.

Generator Tools

CSS Gradient Generator

Create CSS gradients for backgrounds, buttons, and hero sections without leaving the browser.

Gradient CSS is built in your browser. Nothing is uploaded.

Gradient type

Angle (deg)

0 is up, 90 is right, 180 is down, 270 is left.

Color stops

Color for stop 1
Color
Position %
Color for stop 2
Color
Position %

CSS output

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

About CSS Gradient Generator

Create CSS gradients for backgrounds, buttons, and hero sections without leaving the browser. Switch among linear, radial, and conic types, set angle or position, add up to eight color stops, and copy a ready `background:` declaration or the bare gradient value. Pair it with the HEX to RGB Converter for stop colors or the CSS Minifier before you ship. Nothing is uploaded.

How to Use CSS Gradient Generator

Choose linear, radial, or conic.
Set the angle (linear / conic) or shape and position (radial / conic).
Edit color stops - hex and optional % - or add more stops.
Copy the background CSS or the gradient value into your stylesheet. Everything stays on your device.

CSS Gradient Generator Examples

Diagonal brand wash

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - a common hero or card background.

Soft radial spotlight

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) for a soft vignette or modal backdrop.

Conic color wheel

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) for charts and decorative rings.

Three-stop linear fade

Add a middle stop (e.g. #22c55e at 50%) between two brand colors for a richer blend.

Common Use Cases

Design hero and section backgrounds in CSS
Build button and badge fills with multi-stop gradients
Prototype radial spotlights and soft vignettes
Create conic charts or decorative rings
Copy production-ready background declarations

Frequently Asked Questions about CSS Gradient Generator

What CSS gradient types does this tool support?: Linear, radial, and conic. Linear uses an angle in degrees. Radial picks circle or ellipse plus a position. Conic uses a from-angle and position.
How do color stops work?: Each stop is a hex color plus an optional position from 0% to 100%. Leave the position empty to let the browser space stops evenly. You need at least two valid colors.
Should I copy the full background rule or just the gradient?: Use Copy background for `background: linear-gradient(...);` ready to paste. Use Copy value when you need the function alone, for example inside `background-image` or a custom property.
Can I use transparent or 8-digit hex?: Yes. Enter #rrggbbaa (or pick a solid color and edit the hex). Invalid hex values are skipped until fixed.
Does my input leave the device?: No. The CSS Gradient Generator runs entirely in your browser. Colors and settings are not uploaded or stored on a server.

HEX to RGB Converter

Convert HEX to RGB (and back) with HSL, CMYK, a tint-shade ramp, WCAG contrast cards, and a CSS token snippet - free online color code converter.

RGB to HSL Converter

Convert RGB to HSL and HSL to RGB instantly. Free online color converter with a live swatch and copy-ready rgb() and hsl() CSS.

PX to REM Converter

Convert px to rem and em online with a configurable base font size. Free px to rem converter with a quick-reference table. Runs in your browser.

CSS Minifier

Free online CSS minifier. Compress and minify CSS by removing comments and collapsing whitespace - smaller stylesheets, faster page loads. Runs in your browser, no upload required.