Gradients can transform a plain design into something eye-catching and modern. With just a few hex color codes and a line of CSS, you can add beautiful gradients to your website.
What Is a Gradient?
A gradient is a smooth transition between two or more colors. You can use gradients in backgrounds, buttons, text, and more.
Basic CSS Gradient Syntax
Here’s how to create a linear gradient:
background: linear-gradient(to right, #FF7E5F, #FEB47B);
This creates a smooth left-to-right blend from coral to peach.
Other Gradient Directions
to bottom– Top to bottomto left– Right to left45deg– Diagonal
Example:
background: linear-gradient(45deg, #00C9FF, #92FE9D);
Popular Gradient Combos
- Sunset:
#FF5F6D,#FFC371 - Ocean Blue:
#2193b0,#6dd5ed - Lush Green:
#56ab2f,#a8e063
Use our Gradient Generator Tool to create and copy CSS gradients easily!