Gradients are a powerful way to add depth, style, and modern appeal to your website or app. With just a few hex color codes and CSS, you can create stunning visual effects in minutes.
CSS Gradient Basics
To apply a gradient, use the background or background-image property in your CSS:
background: linear-gradient(to right, #FF7E5F, #FEB47B);
This code creates a smooth transition from coral to peach, going left to right.
Popular Gradient Directions
to right: Horizontalto bottom: Vertical45deg: Diagonal
background: linear-gradient(45deg, #00C9FF, #92FE9D);
5 Ready-to-Use Gradient Backgrounds
Sunset Vibe
background: linear-gradient(to right, #FF5F6D, #FFC371);
Ocean Blue
background: linear-gradient(to right, #2193b0, #6dd5ed);
Fresh Green
background: linear-gradient(to right, #56ab2f, #a8e063);
Purple Magic
background: linear-gradient(to right, #DA22FF, #9733EE);
Peach Fire
background: linear-gradient(to right, #ed4264, #ffedbc);
Pro Tip:
Use our Gradient Generator Tool to experiment with your own hex color blends and get instant CSS code.