Radial Gradient Basics

Gradients help display smooth transitions between two or more colors. Radial gradients in particular are defined by a center point from which the chosen colors radiate outwards in all directions.

Here are visual examples of radial gradient in action, and the corresponding code.

.gradient {
width: 200px;
height: 200px;
background: radial-gradient(#d305f2, #4e025a);
<div class="gradient"></div>

Published: Aug 2nd, 2019