What CSS gradient types does this tool support?

Three types: linear (colors along a straight line), radial (colors spreading outward from a center point), and conic (colors sweeping around a center point). Each type generates standard CSS that works in all modern browsers.

How do I add more color stops?

Click 'Add stop' to add a new color stop. You can add up to 8 stops, each with its own color and position (0 to 100%). Stops are sorted by position before the CSS is assembled.

What does the angle control?

For linear gradients, the angle sets the direction (0deg is top to bottom, 90deg is left to right). For conic gradients, the angle sets the starting point of the sweep. Radial gradients do not use an angle.

Is my data sent to a server?

All CSS generation runs locally in your browser. No data is sent to our servers.

CSS gradient generator

CSS gradient generator is a design tool that builds linear, radial, and conic CSS gradients visually. It supports up to 8 color stops, exposes angle and position controls, and copies the complete background-image value with one click. The tool runs in your browser.

CSS

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

GRADIENT

Type

Angle: 135deg

0deg360deg

Color stops

#3b82f6

#8b5cf6

100%

Dedicated pages

Gradient type and use-case specific generators.

CSS linear gradient generator

Generate CSS linear gradients visually. Set angle, color stops, and positions. Live preview with one-click copy. Free, in-browser.

CSS background gradient generator

Generate CSS background gradients for websites. Linear, radial, and conic types with live preview. Copy the CSS value instantly. Free, in-browser.

Gradient color generator

Generate gradient colors for CSS, design systems, and UI. Linear, radial, and conic options with live preview and one-click copy. Free, in-browser.

How to create a CSS gradient

Choose a gradient type: linear, radial, or conic.
Add color stops using the color picker and adjust each stop's position with the slider.
For linear and conic gradients, adjust the angle.
Copy the CSS and paste it into your stylesheet.

Common uses

Creating gradient hero backgrounds and section dividers for websites
Styling buttons and badges with subtle color transitions
Combining with the color palette generator and tints and shades tool to build a full color system

Technical specification

Algorithm or formula: Color stops are sorted by position, then concatenated into the standard linear-gradient(), radial-gradient(), or conic-gradient() CSS syntax. The same string is applied to a preview element via inline style.backgroundImage.
Browser API or library: Native CSS background rendering. No external library.
Input limits: Up to 8 color stops. Angle 0–360°. Stop positions 0–100 percent.
Output: A ready-to-paste CSS background-image value, plus a live preview.
Known limitations: Stop hints (the optional second percentage between stops) and color-interpolation hints are not exposed. Browser-prefixed forms are omitted because all current browsers support the unprefixed syntax.

Frequently asked questions

What CSS gradient types does this tool support?: Three types: linear (colors along a straight line), radial (colors spreading outward from a center point), and conic (colors sweeping around a center point). Each type generates standard CSS that works in all modern browsers.
How do I add more color stops?: Click 'Add stop' to add a new color stop. You can add up to 8 stops, each with its own color and position (0 to 100%). Stops are sorted by position before the CSS is assembled.
What does the angle control?: For linear gradients, the angle sets the direction (0deg is top to bottom, 90deg is left to right). For conic gradients, the angle sets the starting point of the sweep. Radial gradients do not use an angle.
Is my data sent to a server?: All CSS generation runs locally in your browser. No data is sent to our servers.

Reviewed and tested May 25, 2026.