| CARVIEW |
CSS Gradient Generator
Live Preview
Your CSS Code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Click the button to copy the full gradient code
Similar Tools
What is CSS Color Gradient?
Color gradient is actually a mixup and smooth transition from one color to another instead of one solid color. At end, you will have different color and at mixup point there is color buffer zone. It can be more than 2 colors making it multicolor gradient. We can achieve this in CSS too using css-gradient feature.
Pretty much every modern site uses gradients somewhere - buttons, hero sections, overlays on photos, you name it. They have been around and well-supported since like 2012-ish, so you are safe using them everywhere now.
Types of Color Gradient
Linear gradients - In this type of gradient, colors change in a straight line (top to bottom, left to right, diagonal, whatever angle you want). The below code goes from orange to a pinkish-red, left to right.
Radial gradients - In this type of gradient, colors spread out from a center point, like a glow or a circle. In the below code color starts with a light yellow in the middle and fades out to a dark blue.
Gradient Direction & Angles Cheat Sheet
linear-gradient() Quick Directions (the words you can just type)
| Keyword | Result | Code Example |
|---|---|---|
| to top | bottom -> top | linear-gradient(to top, red, blue) |
| to bottom | top -> bottom (default) | linear-gradient(to bottom, red, blue) |
| to left | right -> left | linear-gradient(to left, red, blue) |
| to right | left -> right | linear-gradient(to right, red, blue) |
| to top left | bottom-right -> top-left | linear-gradient(to top left, red, blue) |
| to top right | bottom-left -> top-right | linear-gradient(to top right, red, blue) |
| to bottom left | top-right -> bottom-left | linear-gradient(to bottom left, red, blue) |
| to bottom right | top-left -> bottom-right | linear-gradient(to bottom right, red, blue) |
Angles (in degrees) - the clock you already know
| Angle | Direction | Looks like… | Code |
|---|---|---|---|
| 0deg | ← left to right → | horizontal right | linear-gradient(0deg, red, blue) |
| 45deg | ↙ bottom-left to top-right | perfect diagonal | linear-gradient(45deg, red, blue) |
| 90deg | ↓ top to bottom | straight down | linear-gradient(90deg, red, blue) |
| 135deg | ↖ bottom-right to top-left | the other diagonal | linear-gradient(135deg, red, blue) |
| 180deg | → right to left | horizontal left | linear-gradient(180deg, red, blue) |
| 225deg | ↗ top-right to bottom-left | reverse diagonal | linear-gradient(225deg, red, blue) |
| 270deg | ↑ bottom to top | straight up | linear-gradient(270deg, red, blue) |
| 315deg | ↘ top-left to bottom-right | "Instagram" diagonal | linear-gradient(315deg, red, blue) |