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.

CSS

.gradient {
  width: 200px;
  height: 200px;
  background: radial-gradient(#d305f2, #4e025a);
}

HTML

<div class="gradient"></div>