Similar Tools

Box Shadow CSS Generator

Text Shadow CSS Generator

Drop Shadow CSS Generator

CSS Grid Generator

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.

background: linear-gradient(to right, #ff8a00, #da1b60);

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.

background: radial-gradient(circle, #ffd89b, #19547b);

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)

Bonus: How to remember gradient angles forever

0° = 3 o’clock → right

90° = 12 o’clock → top

180° = 9 o’clock → left

270° = 6 o’clock → bottom