<?xml version="1.0" encoding="utf-8"?>

CSS radial-gradient function

CSS radial-gradient function Bad Practice
CSS radial-gradient function Best Practice

The radial-gradient function takes its start from a single point in the center and smoothly spreads outward in a circular or elliptical (by default) shape.

The basic syntax includes the radial-gradient function and the following arguments:

  • Shape — circle or ellipse.
  • Position, which you can define with length (px, pt, cm), percentage (%), or predefined text values (left, bottom, right, top, etc.)
  • Size, which is set by default as farthest-side, can also take values like closest-side, closest-corner, or farthest-corner.
Improve your UX & Product skills with interactive courses that actually work