CSS Gradient Generator

This CSS gradient generator lets you design linear, radial, and conic gradients visually and copy the ready-to-use CSS code in one click. Drag color stops, adjust the angle, and tune opacity while a live preview updates instantly, so you never have to hand-write gradient syntax.

It is built for front-end developers and designers who want a quick gradient background, a multi-color blend, or a transparent fade without memorizing the linear-gradient(), radial-gradient(), and conic-gradient() rules. Start from a curated preset or build your own from scratch.

Private by design: every gradient is rendered in your browser. Your colors, stops, and CSS output are never uploaded to a server.

How to Use the CSS Gradient Generator

Choose a gradient type

Pick Linear for a straight-line blend, Radial for a circular or elliptical blend, or Conic for a sweeping rotation around a center point.

Add and edit color stops

Click the gradient bar to add a stop, drag a handle to reposition it, or drag it off the bar to remove it. Edit each stop's Color, Position, and Opacity inline or in the stop editor.

Adjust direction and shape

For linear, set the angle with the knob, the input, or the 8-direction grid. For radial, choose circle or ellipse and a 3x3 center position. For conic, set the starting angle and center.

Copy your CSS

When the preview looks right, click Copy CSS to grab the complete background rule and paste it straight into your stylesheet.

Features

Three Gradient Types

Build linear, radial, and conic gradients, each with its own direction, shape, and position controls.

Visual Color Stops

Click the gradient bar to add stops, drag them to reposition, or drag out to remove them with instant feedback.

Angle Knob & Direction Grid

Set a linear angle from 0° to 360° by dragging the knob, typing a value, or using the 8-direction quick grid.

Radial Shape & Position

Switch between circle and ellipse and place the origin with a 3x3 nine-position grid for precise control.

Per-Stop Opacity

Lower the opacity on any stop and the output switches to RGBA automatically, ready for transparent fades.

Highlighted CSS Output

Read clean, color-coded gradient CSS and copy the full background rule to your clipboard in one click.

Undo & Redo

Step backward and forward through your changes with the buttons or the Ctrl+Z and Ctrl+Y shortcuts.

Random & Reverse

Generate a fresh random gradient for inspiration, or flip the direction of your current stops instantly.

46 Curated Presets

Start from a gallery of 46 hand-picked gradients organized by color family, then tweak to taste.

Standard, Private Output

Produces plain CSS gradient syntax that works across modern browsers, all generated locally in your browser.

Frequently Asked Questions

How do I create a CSS gradient?

Choose a gradient type, add color stops by clicking the gradient bar, then adjust the angle, position, and opacity until the live preview looks right. Click Copy CSS to copy the finished background rule into your stylesheet.

What is the difference between linear, radial, and conic gradients?

Linear gradients blend colors along a straight line at a chosen angle. Radial gradients blend outward from a center point in a circle or ellipse. Conic gradients sweep colors in a rotation around a center point, like a pie chart or color wheel.

How do I make a 3-color (or multi-color) CSS gradient?

Click anywhere on the gradient bar to add another stop; the new stop blends with the colors around it. Repeat to add as many stops as you need, then drag each one to position it. A gradient must keep at least two color stops.

How do I make a transparent gradient in CSS?

Lower the Opacity on any stop in the stop editor. Stops below 100% opacity are output as RGBA color values, and the checkerboard pattern in the preview shows you exactly where the gradient becomes transparent.

How do I remove a color stop?

Drag a stop handle off the gradient bar to delete it, or use the delete control in the stop editor. The gradient always keeps a minimum of two stops, so you cannot remove the last two.

Can I copy the generated gradient CSS code?

Yes. The CSS panel shows a syntax-highlighted background rule, and the Copy CSS button copies the complete declaration to your clipboard so you can paste it directly into your stylesheet.

Are the generated gradients compatible with all browsers?

The output uses standard CSS gradient syntax supported by current versions of Chrome, Firefox, Safari, and Edge, with no vendor prefixes needed.

Is my gradient data stored anywhere?

No. Every gradient is generated entirely in your browser. Nothing is sent to a server, and your colors and designs are not stored or tracked.