CSS Conical Gradients

Overview

The css-conic-gradient is a method, using the background-image property and repeating-linear-gradient function to define conical or repeating conical gradients as colors in CSS.

Specifications

CSS Image Values and Replaced Content Module Level 4 # conic-gradients

Syntax

/* A conic gradient rotated 45 degrees, starting blue and finishing red */
 conic-gradient(from 45deg, blue, red);
 /* A bluish purple box: the gradient goes from blue to red, but only the bottom right quadrant is visible, as the center of the conic gradient is at the top left corner */
 conic-gradient(from 90deg at 0 0, blue, red);
 /* Colorwheel */
 background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) );

Code snippets

index.html

Source:index.html

2019-08-31-html-css-can-do-that.html

Source:2019-08-31-html-css-can-do-that.html

Browser Compatibility