Skip to main content

A simple checkbox using CSS mask

A simple design for your checkbox with a nice animation on click.

CSS-only checkbox using CSS mask

input {
--s: 90px; /* control the size */

height: var(--s);
aspect-ratio: 2;
border-radius: var(--s);
border: calc(var(--s)/10) solid #0000;
padding: calc(var(--s)/10);
conic-gradient(#8FBE00 50%,#CC333F 0) /* the colors here */
border-box var(--p,left)/200%;
radial-gradient(50% 50%,#000 98%,#0000) no-repeat
var(--p,left)/calc(3*var(--s)/5) content-box,
linear-gradient(#000 0 0) padding-box,
linear-gradient(#000 0 0);
mask-composite: add, exclude;
transition: .5s;
appearance: none;
input:checked {
--p: right;

See the Pen CSS-only checkbox using mask by Temani Afif (@t_afif) on CodePen.