HTML + CSSCheckboxes
Checkbox con relleno circular
Un círculo con degradado crece desde el centro hasta llenar el cuadro y después aparece el check.
Ajustes
16px
1x
Código
<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>Recordarme</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
Dónde usarlo
Piensa en la casilla «Recordarme» bajo un formulario de login o en el «Guardar mis datos para la próxima vez» de un checkout. Son decisiones pequeñas y tranquilas, y les va bien un relleno que nace del centro: tiene color y suavidad sin llamar demasiado la atención. Si buscas un checkbox CSS con degradado, aquí lo tienes.
El degradado usa dos colores, así que elige dos que se lleven bien entre sí, como dos azules o un rosa con un naranja. Los opuestos muy fuertes quedan sucios en un cuadro tan pequeño.