Home › Text Tools › CSS Gradient Generator

CSS Gradient Generator

Create a CSS linear-gradient with a live preview.

Start color

End color

Direction

Gradient ready

Colors#4f46e5 → #06b6d4

Directionto right

background: linear-gradient(to right, #4f46e5, #06b6d4);

Pick two colors and a direction to generate a CSS linear-gradient, complete with a live preview. Copy the CSS straight into your stylesheet.

Formula / method

linear-gradient(direction, start color, end color)

Examples

Indigo → Cyan, →
a left-to-right blend

Any two hex colors
CSS + preview

Building a linear gradient

This tool lets you pick colours and an angle, then writes the matching CSS linear-gradient value and shows a live preview so you can judge the blend before copying the code. A linear-gradient takes a direction, given as an angle like 90deg or a keyword such as 'to right', followed by two or more colour stops that the browser smoothly fades between. An angle of 0deg points the gradient upward, and it turns clockwise from there.

You can add stops with explicit positions, such as a colour at 0% and another at 100%, to control exactly where each transition happens.

Tips for good gradients

Gradients between colours that sit near each other on the colour wheel tend to look smooth, while blending opposite hues can pass through a muddy grey in the middle; adding an intermediate stop fixes that. Keep in mind that background gradients are drawn with the CSS background property, so text sits on top of them.

When you place text over a gradient, verify that it stays legible against both the lightest and darkest parts of the blend using the Color Contrast Checker, since a passing contrast at one end can fail at the other.

Where it's used

Designing a hero-section or button background
Creating a card, banner or header backdrop
Building a subtle two-colour brand blend
Prototyping a colour transition before writing CSS
Generating copy-paste CSS to drop straight into a stylesheet

Real-world examples

Indigo #4f46e5 to cyan #06b6d4, left to right, gives linear-gradient(to right, #4f46e5, #06b6d4)
A top-to-bottom fade makes a soft full-page background
A 135° diagonal blend adds depth to a call-to-action button
Two hues far apart on the wheel can dull in the middle unless you add a stop

Did you know?

In CSS a gradient is technically an image, not a colour — it is a generated <image> value, which is why it belongs in the background property rather than background-color.

FAQ

Can I use named colors or rgb()?

Yes — start and end accept hex (#4f46e5), rgb() or CSS color names. The preview and CSS update together.