Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp

Pure CSS checkboxes with one element

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.


<input type="checkbox" data-name="Item 3" class="checkbox">


@import url("[email protected];200;300;400;500;600;700;800;900&display=swap");

.checkbox {
    appearance: none;
    height: 100px;
    width: 100px;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(37, 145, 251, 0.98) 0.1%, rgba(0, 7, 128, 1) 99.8%);
    background-size: 360% 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

.checkbox:after {
    content: attr(data-name);
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: #3f3f3f;
    z-index: 99;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);

.checkbox:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0px;
    height: 200%;
    width: 200%;
    background: #e9e9e9;
    z-index: 0;
    transition: all 0.2s linear;
    transform: scale(0.6) translate(-50%, -50%);
.checkbox:focus-visible:before {
    background: #cacaca;
    top: -4%;
    left: 20%;
.checkbox:checked:before {
    opacity: 0;
    transform: scale(0.9);
.checkbox:checked:after {
    color: white;
.checkbox:checked {
    box-shadow: 0px 4px 10px -6px black;

.checkbox:focus-visible {
    outline: none;
    box-shadow: 0px 0px 0px 5px #480f5d;

The result

That’s all for today 😀 If you have any problems don’t hesitate to comment below ;D

Subscribe on YouTube


Generate Smooth Shadows

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.