HTML + CSSCheckboxes
Circle fill checkbox
A gradient circle grows from the middle until it fills the box, then the tick appears on top.
Settings
16px
1x
Code
<label class="uv-ck2c"><input type="checkbox"><span class="bx"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Remember me</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
Where to use it
Picture the “Remember me” box under a login form, or the “Save my details for next time” option in a checkout. Small, quiet choices like these suit a fill that grows from the centre: it has a bit of colour and softness without shouting. If you are looking for a CSS checkbox with a gradient, this is it.
The gradient uses two colours, so pick a pair that sit close together, like two blues or a pink and an orange. Strong opposites look muddy at this small size.