Category: Expert Guide
What is the difference between linear and radial CSS gradients?
Understanding CSS Gradients: Linear vs. Radial
Linear Gradient Example
A smooth transition from left to right.
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
Radial Gradient Example
A circular gradient radiating from the center.
background-image: radial-gradient(circle, #84fab0, #8fd3f4);
Advanced Linear Gradient
Diagonal gradient with multiple color stops.
background-image: linear-gradient(45deg, #a18cd1, #fbc2eb 50%, #a18cd1 100%);
Advanced Radial Gradient
Elliptical gradient positioned to the bottom right.
background-image: radial-gradient(ellipse at bottom right, #ffdde1, #ee9ca7);
© 2023 Tech Journalism Inc.