HTML + CSSCheckboxes
Gradient flip checkbox
The box turns over in 3D and shows its back face, a gradient square with the tick.
Settings
16px
1x
Code
<label class="uv-ck2f"><input type="checkbox"><span class="bx"><i class="fr"></i><i class="bk"><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></i></span>Turn on 3D</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
A flip is fun for optional extras you pick one by one: “Add breakfast” when booking a hotel room, gift wrapping in a shop checkout or toppings on a pizza builder. Each box turns like a card, so you see at a glance which extras are on. A 3D checkbox in CSS.
The flip takes a little longer than a normal tick, so it suits short lists better than long settings pages. Try a slower speed if your brand feels calm, or a faster one for something more playful.