CSS Gradient Generator

What is a CSS gradient generator?

A CSS gradient is a picture the browser paints from a formula. You hand it a direction, a list of colors, and a position for each one, and it fills the box. No file is fetched. Nothing is decoded. The whole thing lives in your stylesheet as text, so it costs one line rather than one request and forty kilobytes, and it stays sharp at any size on any screen. This tool writes that line for you: choose a type, set the stops, copy the result.

Three types cover nearly everything shipped on the web. A linear gradient runs the colors along a straight line at whatever angle you set. A radial gradient spreads them out from a point, as a circle or an ellipse, which is what sits underneath most glows and vignettes. A conic gradient sweeps them around that point the way a clock hand moves, and it is how pie charts and color wheels get drawn when nobody wants to load a charting library. All three read the same list of color stops. That is why one set of controls drives all of them here.

When to use it

Reach for a gradient the moment you were about to export a PNG of a smooth color blend. A gradient has no resolution, so it looks the same on a 5K monitor and a phone and needs no 2x version. It stretches to whatever box you drop it in. It can change on hover or inside a media query, because it is an ordinary CSS value. And it weighs under a hundred bytes, so nothing renders late waiting for a download that might never arrive.

Hero sections, card backgrounds, button fills, section dividers, and the wash behind a photo caption are where most of them end up. Two uses are less obvious. Hard stops turn a gradient into stripes, chevrons, or the diagonal hatch that marks a disabled area, with no image file anywhere. And a radial gradient sized to the closest side is the cheapest spotlight you can put behind a logo.

There are places where a gradient is the wrong answer. Text laid over one is the first: a background that is pale at one end and dark at the other will fail contrast somewhere along its length, and passing at the average tells you nothing about the worst point. Then there is the gradient standing in for artwork. Once the shape has any real structure you end up with eight stacked gradients nobody can edit, where an SVG would have been smaller and legible. Animation is the last trap. Browsers cannot interpolate between two gradients cheaply, so animating background-image repaints the element every frame. Cross-fade the opacity of a second layer instead.

How this tool works

The angle is where people lose an afternoon. CSS measures a linear gradient clockwise from straight up, so 0deg runs from the bottom edge to the top, 90deg runs left to right, 180deg runs top to bottom, and 270deg runs right to left. That matches what transform: rotate() does and contradicts the convention in trigonometry and SVG, where zero points right and the numbers climb the other way. If your gradient came out mirrored, this is why. The number points where the colors are heading.

The eight direction buttons are not shortcuts for the angle box, and this tool keeps them separate deliberately. Top, right, bottom, and left are exactly 0, 90, 180, and 270 degrees, so for those four the two forms agree. The corners behave differently. Writing to top right aims the gradient line so that the top right corner is the last point the final color reaches, which depends on the shape of the element. In a 400 by 100 pixel banner that lands near 76 degrees. In a square it is 45. Choose the keyword when you want the corner pinned as the box resizes, and a number when you want the same slope no matter what. The line above the controls tells you which form is going into the CSS, and touching the other control switches it.

Color stops come out in position order however you added them. Drag stop four back to 10 percent and it is written second, because CSS reads stops left to right and clamps any stop that appears before a lower-positioned one, which produces a gradient nobody asked for. Two stops sharing a position are left exactly as they are. Leaving them alone is the point: black at 50 percent followed by white at 50 percent draws a clean line with no blend across it, and repeating the pattern gives you stripes. Pressing Add drops a new stop into the widest gap and colors it halfway between its neighbors, so the picture never jumps while you are working.

A two stop gradient between colors that sit far apart on the wheel goes muddy in the middle, and the cause is arithmetic rather than taste. The browser interpolates in sRGB, one channel at a time. Halfway between navy #1e3a8a and amber #f59e0b is #8a6c4b, a flat brown that appears in neither color you picked. A third stop fixes it. Put a color you want at the midpoint, or bring the two ends closer together on the wheel, or slide the middle stop off 50 percent so the murky zone is squeezed into a narrow band. Three placed stops beat two hopeful ones.

Every control is a real form control, so the tool works from the keyboard. A stop's position is a slider the arrow keys move a percent at a time, and its remove button says which stop it removes. Two output fields sit at the bottom. The first is the bare value, which is what belongs inside a var(), a Sass variable, or a Tailwind arbitrary value. The second is the full declaration, ready to paste into a rule. Everything happens inside this one browser tab, the preview is a real element wearing your gradient rather than a picture of one, and no color you type leaves the page.

Examples

• The default two stop linear gradient

  Input

  Linear, 135deg, #5fc2ef at 0 percent, #e240d1 at 100 percent

  Output

  background: linear-gradient(135deg, #5fc2ef 0%, #e240d1 100%);

  135deg runs from the top left corner toward the bottom right in a square box. The percentages are written out even though CSS infers 0 and 100 for the first and last stop, because an explicit position is one less thing to work out six months later.

• Stops added out of order

  Input

  Linear, 90deg, #e240d1 dropped at 100 percent, then #07f9fe at 0 percent, then #9780e1 at 52 percent

  Output

  linear-gradient(90deg, #07f9fe 0%, #9780e1 52%, #e240d1 100%)

  Sorted before it is written. Handing CSS the stops in the order they were created would clamp the second one to 100 percent and flatten most of the gradient into a solid block.

• Two stops on one position, which is how stripes are made

  Input

  Linear, 45deg, #191518 at 0 and at 50 percent, #f5f1ea at 50 and at 100 percent

  Output

  linear-gradient(45deg, #191518 0%, #191518 50%, #f5f1ea 50%, #f5f1ea 100%)

  The duplicate 50 percent is kept, which gives a hard diagonal edge with no blend at all.

• A radial spotlight

  Input

  Radial, circle, closest-side, at center, #ffffff at 0 percent, #8f8aa3 at 42 percent, #17151b at 100 percent

  Output

  radial-gradient(circle closest-side at center, #ffffff 0%, #8f8aa3 42%, #17151b 100%)

  Shape, size, and position are written out even when they match the CSS defaults. closest-side finishes the circle at the nearest edge, so the dark end is reached before the corners and the corners stay flat.

• A conic color wheel

  Input

  Conic, start angle 0deg, at center, five stops from #e240d1 back around to #e240d1

  Output

  conic-gradient(from 0deg at center, #e240d1 0%, #ff8008 25%, #22c55e 50%, #07f9fe 75%, #e240d1 100%)

  The first and last stop share a color so the sweep closes without a seam at 12 o'clock. Add border-radius: 50% and it is a color wheel.

Frequently asked questions

• Which gradient type should I use?

  Linear for anything that reads as a wash across a panel, which is most of what ships. Radial when the light has a source: a glow behind a button, a vignette darkening the edges of a photo, a soft circle under a floating card. Conic when the geometry is angular, which in practice means pie charts, progress rings, color wheels, and the rotating sheen people put on card borders. Undecided between linear and radial for a large background? Linear is the safer pick, because a radial gradient in a wide box turns into a visible oval unless you have thought about the size keyword.

• Why does my gradient look muddy or grey in the middle?

  Because the browser blends the red, green, and blue channels separately, and the straight-line path between two saturated colors dips through the desaturated middle of the color space. Navy to amber passes through brown. Blue to yellow passes through gray. Neither is a bug. Add a stop at the halfway mark and set it to a color on the route you wanted, or pull the two ends closer together in hue so the midpoint has less distance to cover. Moving the middle stop away from 50 percent also helps, because it shortens the stretch where the blend looks washed out.

• How do I make stripes instead of a smooth blend?

  Put two stops on the same position. A gradient reading black 0 percent, black 50 percent, white 50 percent, white 100 percent has no transition at all, just a line where one color stops and the next begins. This tool keeps duplicate positions rather than nudging them apart. For a repeating stripe rather than a single band, take the value it gives you, swap linear-gradient for repeating-linear-gradient, and put the stop positions in pixels: repeating-linear-gradient(45deg, #191518 0px, #191518 10px, #f5f1ea 10px, #f5f1ea 20px) is the classic barber pole.

• What does the radial size setting change?

  It decides where the last color stop lands. closest-side ends the shape at the nearest edge of the box, so the outer color is reached before the corners and the corners sit flat. farthest-corner, the CSS default, ends it at the corner furthest from the center, which covers the whole element and gives the most gradual fade of the four. The difference is invisible when the shape is centered in a square and obvious the moment you move the center to a corner or make the box wide, which is when a vignette starts looking wrong.

• Is it safe to put text on a gradient background?

  Only if you check the worst point rather than the middle. Contrast ratio is measured between the text color and the pixel behind it, and on a gradient that pixel changes across the element. A heading clearing 7:1 at the dark end can fall below 3:1 at the light end, and the automated checkers people run sample one point and pass it. Either keep the two ends close enough in lightness that the whole run stays on one side of the threshold, or drop a near-solid overlay behind the text block.

• Why does this tool only take hex colors?

  Because the native color swatch every browser provides works in hex, and keeping one representation means the swatch, the text field, and the output can never disagree about what a stop is set to. CSS is far more relaxed. Anything valid works in a gradient, including rgb(), hsl(), named colors, and any of them with an alpha channel, and a stop such as rgba(255, 255, 255, 0) is how you fade a panel to nothing rather than to white. Copy the value out and edit those stops by hand. If you are still working out which hex you want, the Color Picker on this site converts between hex, RGB, and HSL and hands you a string to paste back in here.

• Our brand colors get copied by hand into every project. Is there a better way?

  Yes, and a gradient button is not where it starts. One click here gives you one declaration to paste. The problem worth solving sits further upstream: a set of design tokens that ships as CSS custom properties, a Tailwind theme, and whatever the mobile app reads, all generated from one source so a palette change is a single commit rather than a week of grep. Zinc Online Solutions builds that pipeline, wires it into your existing build, and leaves behind documentation a new hire can follow on their first day. Send over the palette and the repositories that consume it, and you will get back a plan for where the source of truth belongs.