background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
|
<!DOCTYPE html>
<html lang="en"> <head> <style> .gradient { background-image: conic-gradient(rgb(255, 0, 255), rgb(98, 0, 255), rgb(80, 204, 142)); width: 10rem; height: 5rem; } } </style> </head> <body> <div class="gradient"></div></body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> .gradient { background-image: conic-gradient(rgb(153, 0, 255) 47deg, rgb(21, 34, 219) 95deg, rgba(159, 230, 243, 0.952) 220deg); width: 10rem; height: 5rem; } } </style> </head> <body> <div class="gradient"></div></body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> .gradient { background-image: conic-gradient(from 90deg, rgb(98, 0, 255), rgb(0, 255, 234), rgb(34, 1, 110)); width: 10rem; height: 5rem; } } </style> </head> <body> <div class="gradient"></div></body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> .gradient { background-image: repeating-conic-gradient(rgb(0, 26, 255) 10%, rgb(255, 230, 0) 20%); border-radius: 333px; width: 10rem; height: 5rem; } } </style> </head> <body> <div class="gradient"></div></body> </html> |