CSS Gradients
CSS gradients let you create transitions between two or more colors without using images. Gradients are rendered by the browser as images — they can be used in background-image, border-image, mask-image, and as values for the image() property.
The three main types of gradients:
- linear-gradient() — a gradient along a straight line
- radial-gradient() — a gradient from a single center point
- conic-gradient() — a gradient rotating from a center point
Gradients are very versatile — they can be used for hero backgrounds, button effects, overlays, patterns, and text effects.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gradients</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0f0f1a;
color: #fff;
padding: 40px 20px;
}
h1 {
text-align: center;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #888;
margin-bottom: 50px;
}
.section {
max-width: 900px;
margin: 0 auto 60px;
}
.section h2 {
text-align: center;
margin-bottom: 25px;
color: #667eea;
font-size: 1.3rem;
}
/* ===== Linear Gradient ===== */
.linear-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.gradient-box {
height: 150px;
border-radius: 12px;
display: flex;
align-items: flex-end;
padding: 12px 16px;
font-size: 0.75rem;
font-family: monospace;
color: white;
position: relative;
}
.lg-basic {
background: linear-gradient(to right, #667eea, #764ba2);
}
.lg-angle {
background: linear-gradient(135deg, #f5576c, #ff6b6b);
}
.lg-multi {
background: linear-gradient(to right, #667eea, #764ba2, #f5576c);
}
.lg-stops {
background: linear-gradient(to right, #667eea 0%, #764ba2 30%, #f5576c 60%, #4facfe 100%);
}
.lg-repeating {
background: repeating-linear-gradient(
45deg,
#667eea 0px,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);
}
.lg-transparent {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.3));
}
/* ===== Radial Gradient ===== */
.radial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.rg-circle {
background: radial-gradient(circle, #667eea, #764ba2);
}
.rg-ellipse {
background: radial-gradient(ellipse, #f5576c, #4facfe);
}
.rg-at-position {
background: radial-gradient(circle at top left, #43e97b, #38f9d7);
}
.rg-multi-stop {
background: radial-gradient(circle, #667eea 0%, #764ba2 40%, #f5576c 70%, transparent 100%);
}
.rg-repeating {
background: repeating-radial-gradient(circle, #667eea 0px, #667eea 10px, transparent 10px, transparent 20px);
}
/* ===== Conic Gradient ===== */
.conic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.cg-basic {
background: conic-gradient(#667eea, #764ba2, #f5576c, #4facfe, #667eea);
}
.cg-segments {
background: conic-gradient(
#667eea 0deg 90deg,
#764ba2 90deg 180deg,
#f5576c 180deg 270deg,
#4facfe 270deg 360deg
);
}
.cg-pie {
background: conic-gradient(
#667eea 0% 25%,
#764ba2 25% 50%,
#f5576c 50% 75%,
#4facfe 75% 100%
);
border-radius: 50%;
}
.cg-spinning {
background: conic-gradient(from 0deg, #667eea, #764ba2, #f5576c, #4facfe, #667eea);
animation: spinGradient 3s linear infinite;
}
@keyframes spinGradient {
to { transform: rotate(360deg); }
}
/* ===== Gradient on Text ===== */
.gradient-text-section {
text-align: center;
padding: 40px 0;
}
.gradient-text-1 {
font-size: 3rem;
font-weight: 900;
background: linear-gradient(135deg, #667eea, #764ba2, #f5576c);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
}
.gradient-text-2 {
font-size: 2.5rem;
font-weight: 900;
background: conic-gradient(from 0deg, #667eea, #764ba2, #f5576c, #4facfe, #667eea);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
}
.gradient-text-3 {
font-size: 2rem;
font-weight: 900;
background: linear-gradient(90deg, #f5576c, #fee140, #43e97b, #4facfe, #667eea);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: textGradient 3s linear infinite;
}
@keyframes textGradient {
to { background-position: 200% center; }
}
/* ===== Practical: Hero Gradient ===== */
.hero-gradient {
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a3e 40%, #2d1b69 70%, #1a1a2e 100%);
border-radius: 16px;
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-gradient::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 50%, rgba(102, 126, 234, 0.15), transparent 50%),
radial-gradient(circle at 70% 50%, rgba(245, 87, 108, 0.1), transparent 50%);
animation: heroFloat 8s ease-in-out infinite alternate;
}
@keyframes heroFloat {
from { transform: translate(0, 0); }
to { transform: translate(-5%, -5%); }
}
.hero-gradient h2 {
position: relative;
z-index: 1;
font-size: 2.2rem;
margin-bottom: 15px;
}
.hero-gradient p {
position: relative;
z-index: 1;
color: #aaa;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* ===== Practical: Button Gradient ===== */
.btn-grid {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.grad-btn {
padding: 14px 32px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
color: white;
transition: transform 0.3s, box-shadow 0.3s;
}
.grad-btn-1 {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.grad-btn-2 {
background: linear-gradient(135deg, #f5576c, #ff6b6b);
}
.grad-btn-3 {
background: linear-gradient(135deg, #43e97b, #38f9d7);
color: #1a1a2e;
}
.grad-btn-4 {
background: linear-gradient(135deg, #fa709a, #fee140);
color: #1a1a2e;
}
.grad-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
/* ===== Practical: Overlay Gradient ===== */
.overlay-demo {
position: relative;
height: 300px;
border-radius: 16px;
overflow: hidden;
background: url('https://picsum.photos/seed/gradient-demo/900/400') center/cover;
}
.overlay-demo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.4) 50%,
rgba(0,0,0,0.85) 100%
);
}
.overlay-content {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
z-index: 1;
}
.overlay-content h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.overlay-content p {
color: #ccc;
font-size: 0.9rem;
}
/* ===== Practical: Pattern ===== */
.pattern-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.pattern-box {
height: 150px;
border-radius: 12px;
}
.pattern-dots {
background-image: radial-gradient(circle, #667eea 2px, transparent 2px);
background-size: 20px 20px;
background-color: #1a1a2e;
}
.pattern-stripes {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(102, 126, 234, 0.2) 10px,
rgba(102, 126, 234, 0.2) 20px
);
}
.pattern-grid-bg {
background-image:
linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
background-color: #1a1a2e;
}
.pattern-zigzag {
background:
linear-gradient(135deg, #667eea 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #667eea 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #667eea 25%, transparent 25%),
linear-gradient(45deg, #667eea 25%, transparent 25%);
background-size: 40px 40px;
background-color: #1a1a2e;
}
</style>
</head>
<body>
<h1>CSS Gradients</h1>
<p class="subtitle">Color transitions without images — purely CSS</p>
<div class="section">
<h2>Linear Gradient</h2>
<div class="linear-grid">
<div class="gradient-box lg-basic">
linear-gradient(to right, ...)
</div>
<div class="gradient-box lg-angle">
linear-gradient(135deg, ...)
</div>
<div class="gradient-box lg-multi">
3 colors
</div>
<div class="gradient-box lg-stops">
Custom stops
</div>
<div class="gradient-box lg-repeating">
Repeating
</div>
<div class="gradient-box lg-transparent">
Transparan
</div>
</div>
</div>
<div class="section">
<h2>Radial Gradient</h2>
<div class="radial-grid">
<div class="gradient-box rg-circle">
circle
</div>
<div class="gradient-box rg-ellipse">
ellipse
</div>
<div class="gradient-box rg-at-position">
at top left
</div>
<div class="gradient-box rg-multi-stop">
Multi stop
</div>
<div class="gradient-box rg-repeating">
Repeating
</div>
</div>
</div>
<div class="section">
<h2>Conic Gradient</h2>
<div class="conic-grid">
<div class="gradient-box cg-basic">
Conic gradient
</div>
<div class="gradient-box cg-segments">
Segments
</div>
<div class="gradient-box cg-pie" style="width:150px;height:150px;margin:0 auto;">
Pie chart
</div>
<div class="gradient-box cg-spinning" style="width:150px;height:150px;margin:0 auto;border-radius:50%;">
Spinning
</div>
</div>
</div>
<div class="section">
<h2>Gradient on Text</h2>
<div class="gradient-text-section">
<div class="gradient-text-1">Gradient Text</div>
<div class="gradient-text-2">Conic Text</div>
<div class="gradient-text-3">Animated Gradient</div>
</div>
</div>
<div class="section">
<h2>Hero Section with a Gradient</h2>
<div class="hero-gradient">
<h2>Level Up Skill-mu</h2>
<p>Learn programming with interactive tutorials. From basics to advanced, all in English.</p>
</div>
</div>
<div class="section">
<h2>Button Gradient</h2>
<div class="btn-grid">
<button class="grad-btn grad-btn-1">Primary</button>
<button class="grad-btn grad-btn-2">Danger</button>
<button class="grad-btn grad-btn-3">Success</button>
<button class="grad-btn grad-btn-4">Warning</button>
</div>
</div>
<div class="section">
<h2>Overlay Gradient</h2>
<div class="overlay-demo">
<div class="overlay-content">
<h3>Photo with Gradient Overlay</h3>
<p>A gradient overlay keeps text readable on any image</p>
</div>
</div>
</div>
<div class="section">
<h2>Pattern with Gradients</h2>
<div class="pattern-grid">
<div class="pattern-box pattern-dots"></div>
<div class="pattern-box pattern-stripes"></div>
<div class="pattern-box pattern-grid-bg"></div>
<div class="pattern-box pattern-zigzag"></div>
</div>
</div>
</body>
</html>
Code Explanation
linear-gradient()
Creates a gradient along a straight line. The first parameter is the direction, followed by the colors:
/* Default: from top to bottom */
background: linear-gradient(#667eea, #764ba2);
/* Specific direction */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to bottom right, #667eea, #764ba2);
/* Degree angle */
background: linear-gradient(135deg, #667eea, #764ba2);
Direction in Linear Gradients
to top /* 0deg - bottom to top */
to right /* 90deg - left to right */
to bottom /* 180deg - top to bottom (default) */
to left /* 270deg - right to left */
to top right /* 45deg */
to bottom right /* 135deg */
Color Stops
Colors can be placed at specific positions using percentages or pixels:
background: linear-gradient(
to right,
#667eea 0%, /* start from the left */
#764ba2 50%, /* middle */
#f5576c 100% /* right */
);
repeating-linear-gradient()
Repeats a gradient pattern over and over:
background: repeating-linear-gradient(
45deg,
#667eea 0px,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);
radial-gradient()
A gradient that spreads out from a center point:
/* Circle from the center */
background: radial-gradient(circle, #667eea, #764ba2);
/* Ellipse (default) */
background: radial-gradient(ellipse, #667eea, #764ba2);
/* Specific center position */
background: radial-gradient(circle at top left, #667eea, #764ba2);
background: radial-gradient(circle at 30% 70%, #667eea, #764ba2);
conic-gradient()
A gradient that rotates around a center point — like a clock:
/* Basic */
background: conic-gradient(#667eea, #764ba2, #f5576c, #667eea);
/* With a starting angle */
background: conic-gradient(from 45deg, #667eea, #764ba2, #f5576c);
/* Pie chart segments */
background: conic-gradient(
#667eea 0deg 90deg,
#764ba2 90deg 180deg,
#f5576c 180deg 270deg,
#4facfe 270deg 360deg
);
Gradient on Text
Using background-clip: text to apply the gradient only to the text:
.gradient-text {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
Gradient as Border Image
A gradient can be used as a border:
.border-gradient {
border: 4px solid;
border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}
Gradients for Patterns
Combining multiple gradients to create patterns:
/* Dots pattern */
.pattern-dots {
background-image: radial-gradient(circle, #667eea 2px, transparent 2px);
background-size: 20px 20px;
}
/* Grid pattern */
.pattern-grid {
background-image:
linear-gradient(rgba(102,126,234,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(102,126,234,0.1) 1px, transparent 1px);
background-size: 30px 30px;
}
Everyday Use Cases
1. Hero Section Gradient Background
A dark gradient that adds depth to the hero section:
.hero {
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a3e 50%, #2d1b69 100%);
color: white;
padding: 100px 20px;
}
2. Button Hover Gradient Shift
A gradient that shifts on hover for a visual effect:
.button {
background: linear-gradient(135deg, #667eea, #764ba2);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.button:hover {
background-position: 100% 0;
}
3. Image Overlay for Readability
A gradient overlay from transparent to dark at the bottom of an image — keeping the text readable:
.card-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%);
}
4. Card Background Gradient
A card with a subtle gradient for an attractive visual:
.card {
background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05));
border: 1px solid rgba(102,126,234,0.1);
}
5. Loading Bar Animation
A loading bar with a moving gradient:
@keyframes loadingBar {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.loading-bar {
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f5576c, #667eea);
background-size: 200% 100%;
animation: loadingBar 1.5s linear infinite;
}
Conclusion
CSS gradients provide three main types: linear-gradient() for straight lines, radial-gradient() from a center point, and conic-gradient() rotating. Direction can be specified with keywords (to right) or degrees (135deg). Color stops control the position of color transitions. repeating-linear-gradient() and repeating-radial-gradient() create repeating patterns. Gradients can be used for: backgrounds, text effects (background-clip: text), border images, overlays, and pattern creation — all without any additional image files.