Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Gradient Generator

Design linear, radial, and conic CSS gradients with custom color stops, per-stop transparency, and copy the code.

Preview

Type

Color stops

Drag a stop to move it, click the bar to add one, or focus a stop and use the arrow keys.

  • #6366f1
  • #ec4899
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

How to make a CSS gradient

  1. Pick the gradient type

    Linear blends colors along a straight line at an angle you choose, radial blends outward from the center in a circle, and conic sweeps around a center point.

  2. Edit the color stops

    Drag a handle along the bar under the preview to move a stop, or click an empty spot on the bar to add one. Each stop also has a color, a 0 to 100 percent position field, and a 0 to 100 percent opacity field, and any stop can be removed as long as two remain.

  3. Set the angle

    For linear and conic gradients, drag the angle slider anywhere from 0 to 360 degrees. The preview follows in real time.

  4. Copy the CSS

    The background declaration under the preview always matches what you see. Click Copy CSS to take it.

Why use this tool

Linear, radial, and conic types

Switch between a straight-line blend at any angle, a circular blend that spreads from the center, and a conic sweep around a center point.

As many color stops as the design needs

Start with two stops and keep adding by clicking the bar under the preview. Drag each handle to reposition it, and every stop has its own color picker, position field, and opacity field for fade-to-transparent blends.

Full-circle angle control

Linear gradients accept any angle from 0 to 360 degrees via a slider, with the current value shown in degrees as you drag.

Preview and code cannot drift apart

The swatch at the top sits over a checkerboard so transparency is visible, and it shares the same state as the CSS below, so the copied code is exactly the rendered gradient.

Complete background declaration

Output is a full background rule ending in a semicolon, so it pastes into a stylesheet without wrapping or editing.

Free, with nothing sent anywhere

The gradient is assembled in your browser; there is no account, server, or quota.

About this tool

This gradient generator writes linear-gradient(), radial-gradient(), and conic-gradient() CSS from a visual editor. Linear gradients blend along a straight line at any angle from 0 to 360 degrees; radial gradients spread from the center outward as a circle; conic gradients sweep around a center point from a starting angle. Color stops do the real work: each has a color, a position from 0 to 100 percent, and an opacity from 0 to 100 percent, there is no cap on how many you add, and the Add stop button inserts each new one midway between the last two so the blend stays smooth.

Per-stop opacity means you can build fade-to-transparent overlays, not just solid-to-solid blends. Drop a stop to 0 percent opacity and the gradient fades out, which is exactly what you want for image overlays that keep text legible or for soft edges. The preview sits over a checkerboard so that transparency reads at a glance instead of blending into the page. Gradients carry a lot of interface work: hero backgrounds, button fills, section dividers, overlays, loading-skeleton shimmer. Writing them by hand means guessing percentages and reloading the page to check. Here the preview repaints on every edit and the code block underneath is generated from the same state, so the two can never disagree. The output is a complete background declaration that drops into a rule unchanged.

Nothing is uploaded and there is no account; the CSS exists only in your browser tab. The color palette generator is a quick source of stop colors that already sit well together, and the box shadow generator covers the other half of giving an element depth.

Frequently asked questions

How do I create a gradient?
Choose linear, radial, or conic, then edit the color stops. Each stop has a color, a position from 0 to 100 percent, and an opacity from 0 to 100 percent. For linear and conic gradients you can also set the angle. The preview and the CSS update instantly as you change anything.
What is the difference between linear, radial, and conic?
A linear gradient blends colors along a straight line at the angle you choose. A radial gradient blends colors outward from a center point in a circle, which is useful for spotlights, glows, and soft backgrounds. A conic gradient sweeps colors around a center point from a starting angle, which suits pie-style wheels and color pickers.
Can I make a gradient with transparency?
Yes. Every color stop has an opacity from 0 to 100 percent. Set a stop to a lower opacity to fade it, or to 0 percent for a fully transparent edge, so you can build fade-to-transparent overlays. The preview sits over a checkerboard so you can see exactly how transparent each part is.
Can I add more than two colors?
Yes. Click an empty spot on the bar under the preview to drop in a new stop, or use Add stop, then drag any handle to reposition it. Add as many color stops as you need, each at its own position, and remove any you no longer want. A gradient needs at least two stops, so the last two cannot be removed.
How do I use the generated CSS?
Copy the CSS and paste it into your stylesheet. The output is a complete background declaration, so you can apply it to any element. It works as a value for the background or background-image property.
Is anything uploaded?
No. The gradient is rendered and the CSS is produced entirely in your browser. Nothing is sent to a server, stored, or logged.

Related tools