Frosted glass checkbox
A frosted glass tile over a small color orb that grows, turns and glows when you check it.
Settings
Code
<label class="uv-cgl"><input type="checkbox"><span class="bx"><i aria-hidden="true"></i><span class="gs"><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></span>Sync photos</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
Glass surfaces need something behind them to bend, so this checkbox brings its own: a conic gradient orb sits under a frosted tile with fine highlights on the edges. When checked, the orb slides, rotates and brightens through the glass and a white tick draws itself on top. It suits sync settings, cloud backups and modern system preferences.
The blur slider moves from clear to heavily frosted, and the two colors define the orb. Browsers without backdrop filter still show a tinted tile with the tick, so the state is always visible.