Color Picker in Pure CSS
How do I make an color picker in pure css?
Color Picker in Pure CSS - By Shankar CabusSee my article about this in http://css-tricks.com/conical-gradients-css/. What is a color picker in pure css? How do you make a color picker in pure css? This script and codes were developed by Shankar Cabus on 24 June 2022, Friday.
Color Picker in Pure CSS Previews
Color Picker in Pure CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Picker 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! */ .button { margin: 30px auto 0; width: 13em; height: 13em; border-radius: 3em; position: relative; background-image: linear-gradient(to bottom, #dddddd, #d5d5d5); box-shadow: inset 0 3px 7px 0px #FFF, inset 0 -5px 5px 0px rgba(0, 0, 0, 0.2), 0 27px 51px -10px rgba(0, 0, 0, 0.5);
}
.button:before, .button:after { box-sizing: border-box; display: block;
}
.button:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 6.25em); width: 12.5em; height: 12.5em; background-image: linear-gradient(to bottom, #ffffff, #aaaaaa); -webkit-filter: blur(4px);
}
.button:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 5.5em); top: calc(50% - 5.5em); width: 11em; height: 11em; background-image: linear-gradient(to bottom, #c5c5c5, #dddddd 80%); box-shadow: 0 4px 28px -10px rgba(0, 0, 0, 0.2);
}
.wheel, .colors, .color { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4.75em); top: calc(50% - 4.75em); width: 9.5em; height: 9.5em;
}
.wheel { display: block; z-index: 1; box-shadow: inset 0 16px 32px 14px rgba(0, 0, 0, 0.7);
}
.colors { list-style: none; background: #ddd; position: relative; -webkit-filter: blur(10px); transform: rotate(170deg) scaleX(-1);
}
.color { clip: rect(0px, 9.5em, 9.5em, 4.75em);
}
.color:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4.75em); top: calc(50% - 4.75em); width: 9.5em; height: 9.5em; clip: rect(0px, 4.75em, 9.5em, 0px);
}
.color:nth-child(1):after { background-color: #9ED110; z-index: 12; transform: rotate(30deg);
}
.color:nth-child(2):after { background-color: #50B517; z-index: 11; transform: rotate(60deg);
}
.color:nth-child(3):after { background-color: #179067; z-index: 10; transform: rotate(90deg);
}
.color:nth-child(4):after { background-color: #476EAF; z-index: 9; transform: rotate(120deg);
}
.color:nth-child(5):after { background-color: #9f49ac; z-index: 8; transform: rotate(150deg);
}
.color:nth-child(6):after { background-color: #CC42A2; z-index: 7; transform: rotate(180deg);
}
.color:nth-child(7):after { background-color: #FF3BA7; z-index: 6; transform: rotate(180deg);
}
.color:nth-child(8):after { background-color: #FF5800; z-index: 5; transform: rotate(210deg);
}
.color:nth-child(9):after { background-color: #FF8100; z-index: 4; transform: rotate(240deg);
}
.color:nth-child(10):after { background-color: #FEAC00; z-index: 3; transform: rotate(270deg);
}
.color:nth-child(11):after { background-color: #FFCC00; z-index: 2; transform: rotate(300deg);
}
.color:nth-child(12):after { background-color: #EDE604; z-index: 1; transform: rotate(330deg);
}
.color:nth-child(n+7) { transform: rotate(180deg);
}
.center { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 3.15em); top: calc(50% - 3.15em); width: 6.3em; height: 6.3em; z-index: 2; background-image: linear-gradient(to bottom, #eeeeee, #cccccc); box-shadow: inset 0 3px 7px 0px #FFF, 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 2.1em); top: calc(50% - 2.1em); width: 4.2em; height: 4.2em; background-image: linear-gradient(to bottom, #ffffff 20%, #aaaaaa); box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 1.5em); top: calc(50% - 1.5em); width: 3em; height: 3em; background-image: linear-gradient(to bottom, #aaaaaa, #f5f5f5 80%); box-shadow: inset 0 -1px 4px 0px #FFF;
}
.pin { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 2.75em); top: calc(50% - 2.75em); width: 5.5em; height: 5.5em; z-index: -1; -webkit-animation: spin infinite 4s linear;
}
.pin:after { content: ""; width: 40px; height: 40px; transform: rotate(10deg) skew(40deg, 20deg); box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 15px 3px rgba(0, 0, 0, 0.2); background: #FFF; position: absolute; z-index: -1; left: 6px; top: 10px;
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
body { background: #555;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="button"> <div class="center"> <div class="pin"></div> </div> <div class="wheel"> <ul class="colors"> <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>
</div> <script src="js/index.js"></script>
</body>
</html>
Color Picker in Pure CSS - Script Codes CSS Codes
.button { margin: 30px auto 0; width: 13em; height: 13em; border-radius: 3em; position: relative; background-image: linear-gradient(to bottom, #dddddd, #d5d5d5); box-shadow: inset 0 3px 7px 0px #FFF, inset 0 -5px 5px 0px rgba(0, 0, 0, 0.2), 0 27px 51px -10px rgba(0, 0, 0, 0.5);
}
.button:before, .button:after { box-sizing: border-box; display: block;
}
.button:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 6.25em); width: 12.5em; height: 12.5em; background-image: linear-gradient(to bottom, #ffffff, #aaaaaa); -webkit-filter: blur(4px);
}
.button:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 5.5em); top: calc(50% - 5.5em); width: 11em; height: 11em; background-image: linear-gradient(to bottom, #c5c5c5, #dddddd 80%); box-shadow: 0 4px 28px -10px rgba(0, 0, 0, 0.2);
}
.wheel, .colors, .color { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4.75em); top: calc(50% - 4.75em); width: 9.5em; height: 9.5em;
}
.wheel { display: block; z-index: 1; box-shadow: inset 0 16px 32px 14px rgba(0, 0, 0, 0.7);
}
.colors { list-style: none; background: #ddd; position: relative; -webkit-filter: blur(10px); transform: rotate(170deg) scaleX(-1);
}
.color { clip: rect(0px, 9.5em, 9.5em, 4.75em);
}
.color:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4.75em); top: calc(50% - 4.75em); width: 9.5em; height: 9.5em; clip: rect(0px, 4.75em, 9.5em, 0px);
}
.color:nth-child(1):after { background-color: #9ED110; z-index: 12; transform: rotate(30deg);
}
.color:nth-child(2):after { background-color: #50B517; z-index: 11; transform: rotate(60deg);
}
.color:nth-child(3):after { background-color: #179067; z-index: 10; transform: rotate(90deg);
}
.color:nth-child(4):after { background-color: #476EAF; z-index: 9; transform: rotate(120deg);
}
.color:nth-child(5):after { background-color: #9f49ac; z-index: 8; transform: rotate(150deg);
}
.color:nth-child(6):after { background-color: #CC42A2; z-index: 7; transform: rotate(180deg);
}
.color:nth-child(7):after { background-color: #FF3BA7; z-index: 6; transform: rotate(180deg);
}
.color:nth-child(8):after { background-color: #FF5800; z-index: 5; transform: rotate(210deg);
}
.color:nth-child(9):after { background-color: #FF8100; z-index: 4; transform: rotate(240deg);
}
.color:nth-child(10):after { background-color: #FEAC00; z-index: 3; transform: rotate(270deg);
}
.color:nth-child(11):after { background-color: #FFCC00; z-index: 2; transform: rotate(300deg);
}
.color:nth-child(12):after { background-color: #EDE604; z-index: 1; transform: rotate(330deg);
}
.color:nth-child(n+7) { transform: rotate(180deg);
}
.center { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 3.15em); top: calc(50% - 3.15em); width: 6.3em; height: 6.3em; z-index: 2; background-image: linear-gradient(to bottom, #eeeeee, #cccccc); box-shadow: inset 0 3px 7px 0px #FFF, 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 2.1em); top: calc(50% - 2.1em); width: 4.2em; height: 4.2em; background-image: linear-gradient(to bottom, #ffffff 20%, #aaaaaa); box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 1.5em); top: calc(50% - 1.5em); width: 3em; height: 3em; background-image: linear-gradient(to bottom, #aaaaaa, #f5f5f5 80%); box-shadow: inset 0 -1px 4px 0px #FFF;
}
.pin { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 2.75em); top: calc(50% - 2.75em); width: 5.5em; height: 5.5em; z-index: -1; -webkit-animation: spin infinite 4s linear;
}
.pin:after { content: ""; width: 40px; height: 40px; transform: rotate(10deg) skew(40deg, 20deg); box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 15px 3px rgba(0, 0, 0, 0.2); background: #FFF; position: absolute; z-index: -1; left: 6px; top: 10px;
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
body { background: #555;
}
Color Picker in Pure CSS - Script Codes JS Codes
/* Color Picker Pure CSS - By Shankar Cabus Inspired in Color Picker by Sanadas Young: http://dribbble.com/shots/1177884-Color-Picker See more in http://css-tricks.com/conical-gradients-css/
*/
| Developer | Shankar Cabus |
| Username | shankarcabus |
| Uploaded | June 24, 2022 |
| Rating | 4.5 |
| Size | 5,072 Kb |
| Views | 58,696 |
Do you need developer help for Color Picker 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 | Size |
| CSS pie chart | 2,335 Kb |
| MacOS Beach Ball in Pure CSS | 4,268 Kb |
| Super Mario CSS | 8,335 Kb |
| Compass pure CSS | 4,350 Kb |
| Guest Post on CSS-Tricks | 6,425 Kb |
| Transformers Cube with device orientation | 2,616 Kb |
| Single element heart | 2,602 Kb |
| Front in Aracaju Logo Pure CSS | 2,581 Kb |
| A Pen by Shankar Cabus | 2,336 Kb |
| Conical gradient in pure CSS | 3,548 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| FCC - Tribute Page | Cmwebby | 0 Kb |
| SVG hamburger menu button | Elifitch | 2,602 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
| Algorithm practice | Abensur | 5,620 Kb |
| Simple Weather App | Cmwebby | 0 Kb |
| Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
| Yuliya v krylova | Rafszul | 37,351 Kb |
| Learning canvas drawing | Aurer | 2,204 Kb |
| Website Concept | Sagoza | 3,104 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!