Checkbox de cristal
Una casilla de cristal esmerilado sobre un pequeño orbe de color que crece, gira y brilla al marcarla.
Ajustes
Código
<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>Sincronizar fotos</label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Ver todos: CheckboxesDónde usarlo
El cristal necesita algo detrás que deformar, así que esta casilla trae lo suyo: un orbe de degradado cónico bajo una placa esmerilada con brillos finos en los bordes. Al marcarla, el orbe se desliza, gira y se ilumina a través del cristal y un check blanco se dibuja encima. Encaja en ajustes de sincronización, copias en la nube y preferencias de sistema modernas.
El control de desenfoque va de transparente a muy esmerilado y los dos colores definen el orbe. Los navegadores sin backdrop-filter muestran igualmente una placa tintada con el check, así que el estado siempre se ve.