Gradient Dividers
Use gradients as hr replacements or section separators that fade out elegantly.
CSS
Beginner
3 min read
Gradient Dividers
Example
hr.fancy { border: none; height: 2px;
background: linear-gradient(90deg, transparent, #667eea, transparent); }
.section-sep { height: 60px;
background: linear-gradient(to bottom right, #fff 50%, #f0f4ff 50%); } Pro Tip
A gradient that fades to transparent at both ends looks great on any background color.