Useful Hacks

Color & Design Tools

Visual builders for everyday CSS and design work — gradients, shadows, border radius, an on-screen color picker and a WCAG contrast checker, each with live preview and copyable code.

Featured

Contrast Checker

Check WCAG contrast ratio between two colors, including non-text and transparency.

All design tools

Color Picker

Pick a color from anywhere on your screen, or enter one manually — HEX, RGB, HSL, CMYK, OKLCH.

CSS Gradient Generator

Build a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.

Contrast Checker

Check WCAG contrast ratio between two colors, including non-text and transparency.

Shadow Generator

Build a CSS box-shadow with live preview.

Border Radius Generator

Build a CSS border-radius, with independent corners.

Clip-Path Generator

Build a CSS clip-path visually — circle, ellipse, inset or polygon shapes.

Cubic Bezier Generator

Design a CSS easing curve visually, with an animated preview.

Glassmorphism Generator

Build a frosted-glass CSS panel visually — tint, blur and border, with a live preview.

Frequently asked questions

Related categories

Developer PDF Image Finance

Search tools

Search for any tool by name, category or keyword