Gradient Generator

What the Gradient Generator does

A CSS gradient is a smooth blend between two or more colors, drawn by the browser at render time. The Gradient Generator lets you pick the colors, choose how they're arranged, drag the stops around, and copy the resulting CSS into your stylesheet. No image asset, no Photoshop, no Figma export — just one line of CSS that any modern browser draws on the fly.

Pick two colors and an angle, and you get something like this:

That line, dropped into any CSS rule, paints a smooth coral-to-teal blend at a 135-degree angle (top-left to bottom-right). Change the angle, the colors, or add a stop in the middle, and the gradient updates as you type. Click the copy button when you're happy, paste it into your stylesheet, done.

The Gradient Generator handles linear gradients (the common one), radial gradients (color radiates from a point), and conic gradients (color sweeps around a center, like a pie chart). All three are part of the CSS spec and supported in every browser that's shipped since 2018.

The anatomy of a CSS gradient

Every CSS gradient has three pieces: a type, a direction or shape, and a list of color stops. Once you understand the three, you can read or write any gradient by hand.

• Type. Either linear-gradient(), radial-gradient(), or conic-gradient(). Linear is far and away the most common; radial is the second most common; conic is rarer but useful for pie charts and color wheels.
• Direction or shape. For linear gradients, this is an angle (135deg) or a named direction (to bottom right). For radial, it's the shape (circle or ellipse) and the center position. For conic, it's the starting angle and the center.
• Color stops. A comma-separated list of colors and the percentages along the gradient where they sit. #FF6B6B 0%, #4ECDC4 100% means "start at coral, end at teal, linearly blended."

The minimum syntax is a type and two colors: linear-gradient(red, blue) is a complete, valid gradient that runs top to bottom. Everything else — angles, multiple stops, position offsets — is optional refinement.

A worked example, piece by piece

Let's build the coral-to-teal example slowly. We'll start with two solid colors and add the gradient specifics one at a time.

First the colors. #FF6B6B is a soft coral red (255, 107, 107 in RGB — full red, moderate green and blue). #4ECDC4 is a teal cyan (78, 205, 196 — modest red, near-full green, near-full blue). Pasted as a flat background, neither does anything interesting. The magic is in the blend.

Now the gradient type. linear-gradient(...) wraps the colors. By default, with no angle specified, the gradient runs from top to bottom — the first color at the top, the last color at the bottom.

Now add the angle. 135deg rotates the gradient so it runs from top-left to bottom-right. The 0deg angle points up; 90deg points right; 180deg points down; 270deg points left. 135deg is the diagonal between right and down.

Now the percentages. 0% means "this color sits at the start of the gradient line." 100% means "at the end." If you specify only colors with no percentages, the browser distributes them evenly — first at 0%, last at 100%, the rest in between. Adding explicit percentages lets you control where the transition happens. #FF6B6B 0%, #4ECDC4 50% would put teal at the middle, leaving a flat teal area for the second half.

That's the full example. Type, direction, two stops with explicit positions. Every gradient in the world is some variation on these three pieces.

Angle vs named direction

For linear gradients you have two ways to specify direction. The angle form (45deg, 180deg) is precise and works in every browser. The named form (to top, to bottom right) reads more naturally and is easier to remember.

One small gotcha: angles in CSS gradients increase clockwise, with 0deg pointing up. This differs from math conventions (where 0deg points right and angles increase counterclockwise). If you've ever calculated an angle in JavaScript and pasted it into CSS, you've probably hit this discrepancy.

Radial gradients: color from a point

A radial gradient draws color outward from a center point. Instead of an angle, you specify a shape (circle or ellipse) and optionally where the center is.

That draws a soft yellow at the center fading to peach at the edges. Move the center by changing at center to at top left or at 30% 70%, and the focal point shifts. ellipse instead of circle stretches the gradient to match the element's aspect ratio.

Radial gradients are common for spotlight effects, soft button backgrounds, vignettes, and faux-3D depth. They render exactly as fast as linear gradients — the browser handles both natively.

Conic gradients: color around a center

A conic gradient sweeps color around a center point, like a clock face. The colors are placed at angles around 360 degrees.

That produces a full rainbow color wheel — eight colors spaced evenly around the circle. Conic gradients are the right pick for pie charts (using sharp stops instead of smooth blends), color pickers, and circular progress indicators. They were the last gradient type to ship across browsers (Safari added support in 2020), so if you're targeting very old browsers, test before relying on them.

Popular gradients and their CSS

A short reference for blends that show up everywhere. All of these work as drop-in backgrounds:

Notice that "sunset" and "ocean" share a 135-degree angle but feel completely different because of the color pairing. The angle is the structure; the colors are the mood. Most designers settle on a default angle for their site (usually 135 or 180 degrees) and vary only the colors per section.

Tips that save time

A few things worth knowing before you start dropping gradients all over a project:

• Two-color gradients are the right default. Three-color gradients work for hero sections; four or more colors usually look busy. If you need a complex blend, consider stacking two gradients with the background shorthand (CSS lets you list multiple, separated by commas — the first one drawn is on top).
• Match the contrast of your text. A gradient that runs from white to light gray makes black text readable; a gradient that runs from dark navy to dark purple needs white text. Run the contrast check at both ends of the gradient, not just the middle.
• Use HSL for harmonious gradients. Picking two HSL colors with the same saturation and lightness — varying only the hue — produces blends that feel deliberate. hsl(0, 70%, 60%) to hsl(60, 70%, 60%) is a clean red-to-yellow without any muddy mid-tones.
• Test on real devices. Gradients render slightly differently across screens — especially OLED phones, which can clip subtle low-luminosity transitions. A gradient that looks great on a MacBook may band visibly on a $200 Android phone.
• Animate gradients with care. CSS doesn't natively animate gradient stops (the background property animates as a discrete value, not interpolated). To animate a gradient smoothly, animate the background-position of a larger gradient or use a JavaScript library.

Browser support and the fallback question

Linear and radial gradients have been supported in every major browser since around 2012. If you're building for the modern web, you don't need vendor prefixes (-webkit-linear-gradient, etc.) — they were retired years ago. Conic gradients shipped a bit later (2020 for Safari, earlier for Chrome and Firefox), but at this point all evergreen browsers handle them.

If you're supporting Internet Explorer 11 (rare, but it happens for enterprise projects), gradients still work but with limitations: no conic gradients, awkward syntax for radial. The safe fallback is a solid background-color declared first; the gradient overrides it on browsers that understand the syntax. background: #FF6B6B; background: linear-gradient(...); degrades gracefully.

Related color tools

Gradients are made of colors, so the Gradient Generator pairs with the rest of the Microapp color toolkit:

• Hex Color Picker — pick exact hex values from a visual palette, then paste them into your gradient stops.
• Hex to RGB Converter — convert between #FF6B6B and rgb(255, 107, 107) when your codebase uses one and your designer hands you the other.
• Color Converter — full conversions across HEX, RGB, HSL, HSV, and CMYK in one place. Useful when you're matching brand colors across print and screen.
• Color Palette Generator — generate harmonious palettes (complementary, analogous, triadic) when you need more than two colors but want them to feel related.

Frequently asked questions

Is a CSS gradient slower than a background image?

No — usually it's faster. The browser draws the gradient at render time using GPU-accelerated paths. An image background means an HTTP request, a download, and a decode step before the browser can paint. For solid color blends, CSS gradients are smaller, faster, and crisp at any size. Reach for an image only when you need photographic detail.

Can I use gradients on text instead of backgrounds?

Yes. The trick is to set the gradient as background-image on the text element, then add background-clip: text; and -webkit-text-fill-color: transparent;. The text becomes a window through which the gradient shows. Works in all modern browsers; falls back to the regular text color in older ones.

What's the difference between 0deg and "to top"?

They mean the same thing — the gradient runs from the bottom up. The two forms are equivalent for the cardinal directions; the angle form is just more flexible for in-between angles (like 135deg, which doesn't have a named equivalent).

How many color stops can a gradient have?

The CSS spec doesn't impose a hard limit. Practically, browsers handle dozens of stops fine, but readability falls off fast after three or four. If you find yourself with more than five stops, it's usually a sign you want either a background image (for complex shapes) or multiple stacked gradients (for layered effects).

Why does my gradient look banded or stripey?

Banding happens when adjacent shades along the gradient are far enough apart that the screen can't render the intermediate values. It's most visible on long, low-contrast gradients on lower-quality displays. Two fixes: (1) add an intermediate stop with an averaged color to smooth the transition, or (2) overlay a very subtle noise texture (a 1-3% opacity PNG of grainy noise) to break up the bands visually.

Do gradients work in dark mode?

Gradients work the same in any mode — they're just CSS. What you usually want is different gradients for light and dark mode. Wrap each in a prefers-color-scheme media query: one gradient inside @media (prefers-color-scheme: light), a different one inside @media (prefers-color-scheme: dark). CSS custom properties make this cleaner if your design system uses them.

Can I save a generated gradient and come back to it later?

The Gradient Generator runs entirely in your browser — nothing's saved on a server. The recommended approach is to copy the CSS into your stylesheet (or into a notes file) as soon as you have a gradient you like. That CSS is the gradient's source of truth; pasting it back into the generator any time later reproduces it exactly.