What is a CSS linear-gradient?

The CSS linear-gradient() function creates an image consisting of a progressive transition between two or more colors along a straight line. It is used as the value of background or background-image properties.

How do I specify gradient direction?

You can use keyword directions like "to right", "to bottom left", or numeric degree values like "90deg" (left to right), "180deg" (top to bottom). 0deg is bottom to top.

Can I add more than two colors?

Yes, CSS supports multiple color stops in a gradient, e.g. linear-gradient(to right, red, yellow, green). This generator focuses on two-color gradients for simplicity.

CSS Gradient Generator

Generate CSS linear gradient code with live preview and one-click copy.

Start Color

End Color

Direction

CSS

background: linear-gradient(to right, #e8590c, #3b82f6);

Related Tools

CSSCSS Box Shadow Generator

Generate CSS box-shadow code with live preview using interactive sliders.

CSSCSS Border Radius Generator

Generate CSS border-radius code with live preview for all four corners.

#cColor Format Converter

Convert colors between HEX, RGB, and HSL formats with a live preview swatch.

#HEX to RGB

Convert HEX color codes to RGB and HSL values with a live preview.

FAQ

What is a CSS linear-gradient?: The CSS linear-gradient() function creates an image consisting of a progressive transition between two or more colors along a straight line. It is used as the value of background or background-image properties.
How do I specify gradient direction?: You can use keyword directions like "to right", "to bottom left", or numeric degree values like "90deg" (left to right), "180deg" (top to bottom). 0deg is bottom to top.
Can I add more than two colors?: Yes, CSS supports multiple color stops in a gradient, e.g. linear-gradient(to right, red, yellow, green). This generator focuses on two-color gradients for simplicity.

The CSS Gradient Generator lets you visually create linear gradients by picking start and end colors and choosing the direction. A live preview div updates in real time as you adjust the settings. Copy the ready-to-use CSS background property with a single click.