CSS Gradient Generator

How do CSS gradient functions work?

A CSS gradient is not an image file. It is an image the browser generates on the fly while painting the page, which is why you can put it anywhere an image is allowed, such as background or background-image. Because it is computed rather than downloaded, it stays sharp at any resolution and adds no extra network request. Three functions cover most real-world use:

• linear-gradient: colors change along a straight line. This is the everyday choice for buttons, banners and section backgrounds.
• radial-gradient: colors spread outward from a single point in a circle or ellipse. It suits spotlights and soft vignettes.
• conic-gradient: colors sweep around a center point by angle, like the hands of a clock. It is used for pie charts, color wheels and brushed-metal looks.

The basic syntax is linear-gradient(angle, color1, color2). Adding a position after a color, such as 40%, tells the browser where that color should be at full strength; if you leave positions out, the stops are spaced evenly. If you give two neighboring colors the same position, the blend disappears and you get a hard-edged stripe instead of a smooth fade.

Angle and direction keyword reference

Angles increase clockwise, with 0deg pointing up and 90deg pointing right. So 90deg puts the first color on the left and the last color on the right. If you omit the angle entirely, the default is to bottom, which equals 180deg.

Corner keywords such as to top right adapt to the box's aspect ratio, so on a wide rectangle they do not equal exactly 45deg. If you want the identical slope at every size, use a numeric angle instead.

Choosing colors that blend well

By default the browser interpolates between two colors along a straight line in RGB values. When the two colors sit near opposite sides of the color wheel (blue and orange, for example), the midpoint often collapses into a muddy gray. You can avoid that by adding a middle color of your own or by choosing hues that are closer together on the wheel. That is exactly what the "Use a third color" option is for. Modern browsers also let you pick the interpolation space, as in linear-gradient(in oklch, ...), but support keeps evolving, so check your target browsers before relying on it.

If you are unsure which colors to combine, pick a starting set in the Color Palette Generator, and use the Color Converter to move between HEX, RGB and HSL when you need a particular format.

Worked example: gold to deep navy

This page starts with #c9a961 (gold) and #1a1a2e (deep navy). Averaging the RGB channels gives an exact midpoint of#726248. The table below shows the WCAG contrast ratios, computed from relative luminance, for white and black text on each of the three colors.

As the table shows, black text reads well on the gold end and white text reads well on the navy end. The trouble is the zone in between. A gradient changes the background brightness continuously across one element, so how readable a line of text is depends on exactly where it sits. If you place text on a gradient, judge it by the worst spot, which is usually the middle. In the example, the midpoint gives 5.91:1 against white but only 3.56:1 against black, so white text is the safer choice there, while the gold end only manages 2.25:1 with white. The readability panel in the tool above shows the ratio for each stop instantly. For a finer check use theContrast Checker.

Design tips by use case

The same two colors can look right or wrong depending on where they are used. These are rules of thumb that hold up in practice:

• Buttons: a top-to-bottom (180deg) shift from a lighter to a slightly darker shade adds a sense of depth. Keep the brightness difference small, or the label will be hard to read at one end.
• Hero banners: a diagonal around 135deg tends to look natural when the banner's proportions change between desktop and mobile. Align the headline with the darkest (or lightest) side to secure contrast.
• Cards and section dividers: two shades of the same hue with only a small lightness change are the most stable. Save strongly contrasting colors for a single accent.
• Spotlights and vignettes: use radial with a bright center and darker edges so the eye gravitates to the middle.
• Pie charts and color wheels: with conic you can set color stops in percentages to draw donut segments. Set the starting angle with from 90deg, for example.

How to read the generated code

A line such as background: linear-gradient(90deg, #c9a961, #8a6d3b, #1a1a2e); reads as: "going from left to right, change from gold to a brownish gold to deep navy." With three colors the stops sit at 0%, 50% and 100%. Rewrite it as#c9a961 0%, #8a6d3b 30%, #1a1a2e 100% and the middle color moves toward the left, shortening the light section and stretching the dark one. The line background: #c9a961; that the tool prints first is a fallback color for environments that cannot parse gradients; when the second line is valid, it overrides the first.

Common mistakes and how to fix them

• Text disappears at one end: one text color across a full-width gradient will fail somewhere. Put a semi-transparent dark overlay behind the text, or shift the gradient so the text sits on one side of it.
• Visible banding: two very similar colors painted over a huge area can show stair-step bands. Widen the color difference a little, or layer a very faint noise texture on top.
• Broken background on phones: background-attachment: fixed on a long page is ignored or slow in some mobile browsers. Use a separate fixed layer if you need that effect.
• Layer order with photos: when you list several backgrounds separated by commas, the first one is drawn on top. To tint a photo with a gradient, write the gradient first.
• No fallback color: if you care about very old environments, keep a plain background color line before the gradient. The code from this tool includes one based on your start color.

Putting the result to use

Paste the copied code as the value of background (or background-image) in your stylesheet. If the same gradient appears in several places, define it once in a CSS variable such as --brand-gradient and reuse it, so a later color change is a one-line edit. Gradient-filled text is a separate technique that combines background-clip: text with a transparent text color; you can start from this tool's output and add those properties. Even then, check that both the lightest and darkest parts of the text still contrast with the page behind them.

Limits of this tool

The generator spaces two or three colors evenly. It does not offer color positions in percent, repeating gradients, or control over a radial gradient's center and size. If you need those, edit the generated code by hand, for example adding 40% after a color orat top left after circle. The color inputs use the browser's built-in picker, which has no alpha channel, so semi-transparent colors have to be typed into the code manually.

Frequently Asked Questions