Visual Tools

Morse code, ASCII art, and more. — 7 tools available, all free.

CSS Gradient Generator
Design CSS gradients visually and copy production-ready code.
Visual
Color Converter
Convert colors between HEX, RGB, HSL, and OKLCH instantly.
Visual
WCAG Contrast Checker
Check color contrast against WCAG AA/AAA and fix failing pairs.
Visual
Glassmorphism Generator
Design frosted-glass CSS surfaces with a live preview.
Visual
Box Shadow Generator
Design multi-layer CSS box-shadows with a live visual preview.
Visual
Cubic-Bezier Easing Generator
Draw custom CSS easing curves with a live animation preview.
Visual
Gradient Border Generator
Design animated CSS gradient borders and copy the code.
Visual

When do you need a Visual tool?

Visual tools help frontend developers and designers work faster with CSS and colour. The CSS Gradient Generator provides a visual editor for linear, radial, and conic gradients, outputting production-ready CSS you can paste directly into your stylesheet. The Color Converter translates between HEX, RGB, HSL, and OKLCH, making it easy to work across different CSS formats.

Accessibility compliance is covered by the WCAG Contrast Checker, which verifies text-to-background contrast ratios against the AA (4.5:1) and AAA (7:1) standards. The Glassmorphism Generator and Box Shadow Generator handle modern CSS effects with live previews so you can fine-tune visually rather than editing numbers blind.