HTML + CSSCheckboxes
Jelly checkbox
The box wobbles like jelly when checked and fills with a juicy, glossy color.
Settings
16px
1x
Code
<label class="uv-cjl"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Get offers</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
See all CheckboxesWhere to use it
A small dose of squash and stretch makes a plain consent box feel friendly. When checked, this checkbox squeezes, stretches and skews for a moment like a cube of jelly, then settles with a glossy highlight and a white tick that pops in. It works for newsletter opt-ins, playful settings screens and food or candy brands.
Fresh mint and turquoise feel light, berry tones feel sweet. The wobble only plays when the box is checked, so long forms stay calm, and reduced motion users get the color change without the shake.