Hi dear welcome to "CodePrime" Blog . In this post we are going to learn how to use css conic-gradient property. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic-Gradient-css by codeprime</title>
</head>
<body style="background:linear-gradient(black,white);width: 100%;height: 100vh;">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
CSS CODE
.box{
width: 150px;
height: 150px;
background-color: transparent;
float: left;
margin: 20px;
border-radius: 50%;
border:3px solid green
}
.box:nth-child(1){
background-image: conic-gradient(red,blue,yellow);
}
.box:nth-child(2){
background-image: conic-gradient(from 100deg, red,blue,yellow);
}
.box:nth-child(3){
background-image: conic-gradient(red,blue,yellow,red);
}
.box:nth-child(4){
background-image: repeating-conic-gradient(red 0deg,red 30deg,blue 0deg,blue 50deg);
}
.box:nth-child(5){
background-image: repeating-conic-gradient(red 0deg,red 90deg,blue 90deg,blue 180deg);
}
.box:nth-child(6){
background-image: repeating-conic-gradient(red 0deg,red 90deg,blue 90deg,blue 180deg);
background-size: 20px 20px;
border-radius: 0;
}
0 Comments