CSS Gradient
What is a CSS Gradient?
A CSS Gradient is a smooth transition between two or more colors. Unlike background images, gradients are created entirely with CSS, making them lightweight, scalable, and easy to customize. CSS provides three main types of gradients: Linear Gradient, Radial Gradient, and Conic Gradient.
Why Use CSS Gradients?
CSS gradients make webpages more attractive without using image files. They load faster than images, can be resized without losing quality, and are commonly used for backgrounds, buttons, banners, cards, and modern UI designs.
Types of CSS Gradients
Step 1: Create a Linear Gradient
A linear gradient changes colors in a straight line from one side to another.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
height:150px;
background:linear-gradient(to right,red,orange);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Step 2: Create a Vertical Gradient
Change the gradient direction from top to bottom using to bottom.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
height:150px;
background:linear-gradient(to bottom,#007BFF,#00C6FF);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Step 3: Create a Radial Gradient
A radial gradient starts from the center and spreads outward in a circular or elliptical shape.
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:220px;
height:220px;
border-radius:50%;
background:radial-gradient(yellow,orange,red);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>Step 4: Create a Conic Gradient
A conic gradient rotates colors around the center point, making it useful for circular designs.
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:220px;
height:220px;
border-radius:50%;
background:conic-gradient(red,yellow,lime,aqua,blue,purple,red);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>Step 5: Apply a Gradient to a Button
Gradients are often used on buttons to create a modern and attractive appearance.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 25px;
border:none;
color:white;
font-size:18px;
cursor:pointer;
background:linear-gradient(to right,#ff512f,#dd2476);
border-radius:6px;
}
</style>
</head>
<body>
<button>
Gradient Button
</button>
</body>
</html>Complete CSS Gradient Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
text-align:center;
background:#f5f5f5;
}
.banner{
width:400px;
margin:40px auto;
padding:40px;
color:white;
font-size:28px;
border-radius:10px;
background:linear-gradient(135deg,#00c6ff,#0072ff);
}
button{
margin-top:20px;
padding:12px 25px;
border:none;
border-radius:6px;
font-size:18px;
color:white;
cursor:pointer;
background:linear-gradient(to right,#ff512f,#dd2476);
}
</style>
</head>
<body>
<div class="banner">
Welcome to CSS Gradients
<br>
<button>
Get Started
</button>
</div>
</body>
</html>Advantages of CSS Gradients
Best Practices
- Choose colors that complement each other.
- Ensure sufficient contrast between text and gradient backgrounds.
- Use gradients to enhance the design, not distract users.
- Prefer CSS gradients over image backgrounds whenever possible.
- Experiment with linear, radial, and conic gradients.
- Use gradient angles to create interesting visual effects.
- Test gradients on different screen sizes.
- Keep gradient designs simple and consistent throughout the website.
Web Resources on CSS Gradient
1. MDN Web Docs : <gradient> CSS type
2. Web Gradients.com : CSS Gradient Backgrounds
3. Web.dev : Gradients
4. Color Zilla.com : Ultimate CSS Gradient Generator
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.