DEV Community

Cover image for Create a circular gradient in CSS

Create a circular gradient in CSS

Maxime Guilbert
Just a dev who touches a lot of things and wants to share his experiences. (or just want to note somewhere things to don't forget)
・1 min read

After searching during hours, with people saying "it's impossible to do it with CSS or SVG", I found it!

With the following property, you will be able to define a circular gradient in CSS!

background:conic-gradient(from 0deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
Enter fullscreen mode Exit fullscreen mode

I hope it will help you!

Discussion (0)

Forem Open with the Forem app