Conical gradient in pure CSS

Developer
Shankar Cabus
Size
3,548 Kb
Views
60,720
  1. Conical gradient in pure CSS Previews
  2. Conical gradient in pure CSS HTML Codes
  3. Conical gradient in pure CSS CSS Codes
  4. Conical gradient in pure CSS JS Codes

How do I make an conical gradient in pure css?

Color wheel in pure CSS simulating the conical gradient.See my article about this in http://css-tricks.com/conical-gradients-css/. What is a conical gradient in pure css? How do you make a conical gradient in pure css? This script and codes were developed by Shankar Cabus on 24 June 2022, Friday.

Conical gradient in pure CSS Previews
IQ Test

Conical gradient in pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Conical gradient in pure CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .wheel, .umbrella, .color { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em;
}
.wheel { overflow: hidden; width: 15em; height: 15em; position: relative;
}
.umbrella { position: relative; -webkit-filter: blur(1.7em); -webkit-transform: scale(1.35);
}
.color, .color:nth-child(n+7):after { clip: rect(0, 15em, 15em, 7.5em);
}
.color:after, .color:nth-child(n+7) { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em; clip: rect(0, 7.5em, 15em, 0);
}
.color:nth-child(1):after { background-color: #9ED110; transform: rotate(30deg); z-index: 12;
}
.color:nth-child(2):after { background-color: #50B517; transform: rotate(60deg); z-index: 11;
}
.color:nth-child(3):after { background-color: #179067; transform: rotate(90deg); z-index: 10;
}
.color:nth-child(4):after { background-color: #476EAF; transform: rotate(120deg); z-index: 9;
}
.color:nth-child(5):after { background-color: #9f49ac; transform: rotate(150deg); z-index: 8;
}
.color:nth-child(6):after { background-color: #CC42A2; transform: rotate(180deg); z-index: 7;
}
.color:nth-child(7):after { background-color: #FF3BA7; transform: rotate(180deg);
}
.color:nth-child(8):after { background-color: #FF5800; transform: rotate(210deg);
}
.color:nth-child(9):after { background-color: #FF8100; transform: rotate(240deg);
}
.color:nth-child(10):after { background-color: #FEAC00; transform: rotate(270deg);
}
.color:nth-child(11):after { background-color: #FFCC00; transform: rotate(300deg);
}
.color:nth-child(12):after { background-color: #EDE604; transform: rotate(330deg);
}
body { background: #f2f2f2; padding: 50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wheel"><ul class="umbrella"><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li><li class="color"></li></ul></div> <script src="js/index.js"></script>
</body>
</html>

Conical gradient in pure CSS - Script Codes CSS Codes

.wheel, .umbrella, .color { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em;
}
.wheel { overflow: hidden; width: 15em; height: 15em; position: relative;
}
.umbrella { position: relative; -webkit-filter: blur(1.7em); -webkit-transform: scale(1.35);
}
.color, .color:nth-child(n+7):after { clip: rect(0, 15em, 15em, 7.5em);
}
.color:after, .color:nth-child(n+7) { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em; clip: rect(0, 7.5em, 15em, 0);
}
.color:nth-child(1):after { background-color: #9ED110; transform: rotate(30deg); z-index: 12;
}
.color:nth-child(2):after { background-color: #50B517; transform: rotate(60deg); z-index: 11;
}
.color:nth-child(3):after { background-color: #179067; transform: rotate(90deg); z-index: 10;
}
.color:nth-child(4):after { background-color: #476EAF; transform: rotate(120deg); z-index: 9;
}
.color:nth-child(5):after { background-color: #9f49ac; transform: rotate(150deg); z-index: 8;
}
.color:nth-child(6):after { background-color: #CC42A2; transform: rotate(180deg); z-index: 7;
}
.color:nth-child(7):after { background-color: #FF3BA7; transform: rotate(180deg);
}
.color:nth-child(8):after { background-color: #FF5800; transform: rotate(210deg);
}
.color:nth-child(9):after { background-color: #FF8100; transform: rotate(240deg);
}
.color:nth-child(10):after { background-color: #FEAC00; transform: rotate(270deg);
}
.color:nth-child(11):after { background-color: #FFCC00; transform: rotate(300deg);
}
.color:nth-child(12):after { background-color: #EDE604; transform: rotate(330deg);
}
body { background: #f2f2f2; padding: 50px;
}

Conical gradient in pure CSS - Script Codes JS Codes

/* See more in http://css-tricks.com/conical-gradients-css/
*/
Conical gradient in pure CSS - Script Codes
Conical gradient in pure CSS - Script Codes
Home Page Home
Developer Shankar Cabus
Username shankarcabus
Uploaded June 24, 2022
Rating 4.5
Size 3,548 Kb
Views 60,720
Do you need developer help for Conical gradient in pure CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shankar Cabus (shankarcabus) Script Codes
Name
Color Picker in Pure CSS
Front in Aracaju Logo Pure CSS
Compass pure CSS
A Pen by Shankar Cabus
JusBrasil logo single element
Flat Progress Bar CSS e HTML
Single element heart
Transformers Cube with device orientation
Guest Post on CSS-Tricks
Super Mario CSS
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!