Question 1

how to make a gradient in css

Accepted Answer

Put the linear-gradient function into the background property with a direction and colours: background: linear-gradient(135deg, #6c8cff, #b18cff). The angle sets the direction, colours are separated by commas, and percentage positions are optional — without them the browser spreads the colours evenly. The builder writes the code for you: move the stops on the bar and copy ready CSS, a rule with a fallback or a Tailwind class.

Question 2

why does my gradient turn muddy grey in the middle

Accepted Answer

When blending in plain sRGB, a transition between opposite colours such as blue and yellow passes through grey: the channels are averaged and saturation sinks in the middle. Add in oklch after the direction and the browser blends perceptually, keeping the transition clean. The tool spots the dip by itself, marks where it is on a strip and fixes it with one button, while older browsers get the first colour as a fallback.

Question 3

what is the difference between linear, radial and conic gradients

Accepted Answer

A linear gradient runs along a straight line at a set angle: 90deg goes left to right, 180deg top to bottom. A radial one spreads from the centre as a circle or an ellipse, sized by keywords such as closest-side or farthest-corner. A conic one turns around the centre starting from the from angle and draws pie charts, colour wheels and sectors. All three have a repeating-* variant that repeats the pattern to the edge.

Question 4

how to make a hard edge between colours

Accepted Answer

Put two colour stops at the same position and the transition between them becomes instant. For example, linear-gradient(90deg, #e4002b 50%, #16130f 50%) splits a block in half with no soft zone. This is how stripes, two-tone backgrounds and sectors are made without images, and in a repeating gradient — hatching. In the builder, type the same position for two stops or drag a marker right next to its neighbour.

Question 5

is text on a gradient readable

Accepted Answer

Not equally everywhere: the background changes and contrast changes with it. White text may meet WCAG at the dark end and fail at the light one. The tool computes contrast at one hundred and one points along the whole length, draws the curve, highlights parts below 4.5:1, or 3:1 for large text, and names the worst point. If the text fails, a button finds the closest colour that passes everywhere.

Question 6

how to make gradient text

Accepted Answer

Set the gradient as the element’s background, clip it to the letters with background-clip: text and make the letter fill transparent with -webkit-text-fill-color. Wrap the rule in @supports and keep a plain color as a fallback, otherwise browsers without support show invisible text. Ready code with a live example in your colours is on the “Gradient text” recipe page, linked from the card in the recipes section.

Colour · gradientCSS gradient generator

Builder

Colour stops

Text readability

Recipes

About gradients

Three types

Colour stops

The dead grey zone

OKLCH to the rescue

Text on top

Banding

Frequently asked

how to make a gradient in css

why does my gradient turn muddy grey in the middle

what is the difference between linear, radial and conic gradients

how to make a hard edge between colours

is text on a gradient readable

how to make gradient text

Colour · gradientCSS gradient generator

Builder

Colour stops

Text readability

Recipes

Gradient text

Gradient button

Gradient border

Animated gradient

About gradients

Three types

Colour stops

The dead grey zone

OKLCH to the rescue

Text on top

Banding

Frequently asked

how to make a gradient in css

why does my gradient turn muddy grey in the middle

what is the difference between linear, radial and conic gradients

how to make a hard edge between colours

is text on a gradient readable

how to make gradient text

Related tools

Color converter

Contrast checker

Palette generator

Favicon generator