Diagonal Fill Checkbox

A compact rounded checkbox that fills diagonally with one crisp, fluid sweep.

About this tool

A minimalist CSS checkbox built around a rotated square that travels diagonally into a rounded outline when selected. The source geometry stays intact — a 30px box, 10px radius, 2px white outline, 60px fill and 300ms ease — while HorizonX adds keyboard access, a visible focus state and reduced-motion support. Edit the stage, size, border, radius, outline, fill, angle and timing, then export one self-contained HTML file.

In collections: Custom CSS Checkboxes & Radio Buttons Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS All tools

Checkbox

Checked

Size px

Inner border px

Corner radius px

Outline

Outline width px

Outline colour

#ffffff

Fill

Fill colour

#ffffff

Fill angle °

Motion

Transition ms

Stage

Stage width px

Stage height px