CSS Gradient Generator

Build linear, radial, and conic CSS gradients with a live preview and unlimited ...

SecureFastFree

Updated

Preset gallery

Live preview

linear

Gradient settings

Color stops (2)

CSS output

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

Tailwind class

bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]

Export as PNG

The image is rendered locally in your browser with a canvas. Nothing is uploaded.

Quick answer

A CSS gradient generator lets you design a color blend visually and copy the code. Pick linear, radial, or conic, add color stops, set the angle or center, and this tool writes the CSS for you, for example background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);. It also outputs a Tailwind class and can export a PNG, and it runs fully in your browser.

SSL Secured
256-bit Encryption
Cloud Processing
Mobile Friendly

Everything In One Tool

Linear Gradients - Full 0 to 360 degree angle control
Radial Gradients - Circle or ellipse with a movable center
Conic Gradients - Rotating sweep around a center point
Up To 12 Stops - Drag handles or type exact percents
CSS And Tailwind - Copy either output in one tap
PNG Export - Render locally at social sizes

Why Use CSS Gradient Generator?

Linear, Radial and Conic

Switch between all three CSS gradient types in one click. Set the angle for linear and conic, the shape for radial, and the center point for both radial and conic.

Large Live Preview

A full-width preview repaints the moment you drag a stop, change the angle, or swap the type, so you always design against the real result.

Unlimited Color Stops

Start with two stops and add up to twelve. Drag each handle along the bar or type an exact percent, and set the color with a picker or a hex field.

CSS And Tailwind Output

Copy the standard background CSS or the Tailwind arbitrary-value class. Both update live and copy with one tap, ready to paste into your project.

Export A PNG

Render the gradient to a PNG at 1080p, square, or social sizes. The image is drawn locally with a canvas, so nothing leaves your device.

100% In Your Browser

There is no server and no upload. Every gradient, copy, and export happens on your device, and no account is needed.

What You Can Build

Page And Section Backgrounds

Design full-page or hero backgrounds with smooth color transitions and copy the CSS straight in.

Buttons And Cards

Make eye-catching gradient buttons and cards for calls to action and interactive elements.

Gradient Text

Pair the output with background-clip for modern gradient headings and logos.

Social And Export Images

Export a gradient PNG for banners, thumbnails, and slide backgrounds at the size you need.

How It Works

1

Pick A Type Or Preset

Choose linear, radial, or conic, or click a preset from the gallery to start from a ready-made gradient. The Random button gives you a fresh idea instantly.

2

Add And Position Stops

Drag stops along the bar or type a position percent, then set each color with the picker or hex field. Add stops for richer multi-color blends.

3

Aim The Gradient

Set the angle for a linear or conic gradient, or move the center point for radial and conic. Watch the large preview update as you go.

4

Copy Or Export

Copy the background CSS or the Tailwind class with one tap, or export the gradient as a PNG at the size you need.

Gradient Tips

Use Analogous Colors

Colors next to each other on the color wheel, like blue to purple, create the smoothest and most natural gradients.

135 Degrees Feels Balanced

A 135 degree angle runs top-left to bottom-right, follows the natural reading direction, and is the most popular default.

Avoid Muddy Middles

When two complementary colors meet, add a middle stop so the blend does not turn into a dull gray band in the center.

Frequently Asked Questions

Choose a gradient type, pick two or more colors, and set their positions. This tool writes the CSS for you: it outputs a background property such as background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); that you copy and paste into your stylesheet. You can also copy the equivalent Tailwind class.
A linear gradient blends colors along a straight line set by an angle. A radial gradient blends outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel, which suits pie charts and progress rings.
Click Add color to insert a new stop in the largest gap, then set its color and position. You can add up to twelve stops and drag each handle along the bar, so multi-color and rainbow gradients take only a few seconds.
Use the angle slider for linear and conic gradients. In CSS, 0deg points to the top, 90deg to the right, and 180deg to the bottom, and the value increases clockwise. For radial and conic gradients you can also move the center point with the X and Y sliders.
Yes. Alongside the plain CSS, the tool outputs a Tailwind arbitrary-value class such as bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)] with spaces replaced by underscores as Tailwind requires. Copy it and drop it straight onto an element.
Linear and radial gradients work in every modern browser. Conic gradients are supported in current Chrome, Edge, Safari, and Firefox. The generated code uses standard syntax with no vendor prefixes needed for today's browsers.
Yes. It is completely free with no signup and no limits. Everything runs in your browser, so your colors, CSS, and any exported PNG never touch a server.

Related Tools

Color Picker

Pick colors and read HEX, RGB and HSL

Color Converter

Convert between HEX, RGB, HSL and more

CSS Formatter

Format and beautify your CSS

Box Shadow Generator

Design CSS box shadows visually