CSS Gradient Generator

What is a Linear Gradient?

Probably the most common and used type of gradient is the linear-gradient().

To create a linear gradient you must define at least two colors (or color-stops), and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).

The gradient direction can be specified as a 2 words value (e.g. "to top", "to bottom", "to left" and "to right") or it can be specified as an angle value (e.g. "0deg", "90deg"' "180deg").

If you don't declare any value, the default direction will be set "to bottom", meaning the gradient will go from top (color-stop-1) to bottom (color-stop-2).

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Example

background: linear-gradient(to bottom right, #7A7FBA, #11C37C);

More examples

background: linear-gradient(135deg, #FF6B6B, #FFD93D, #6BCB77);

background: linear-gradient(90deg, #2E3192, #1BFFFF);

Common uses

• Page and section backgrounds / hero banners
• Button fills and hover states
• Card headers and overlays on images
• Subtle section dividers

Browser compatibility

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.

Using Tailwind CSS? See Tailwind gradients for the classes, or copy any gradient from the generator as Tailwind v4 or v3 classes.

FAQ

How do I get the hex value of a gradient color stop?

The gradient itself can use hex, rgb, or hsl directly — if you need to convert between formats, use the RGB to Hex & Hex to RGB converter.

What's the difference between "to right" and "90deg"?

They're not always the same — keyword directions ("to right", "to bottom left") go corner-to-corner or edge-to-edge based on the box's shape, while angle values ("90deg") always point in an exact compass direction regardless of the box's aspect ratio.