🎨 Color & Design Tools

Twenty-two tools for working with color and CSS — converters, accessibility checks and live-preview generators. Every one runs entirely in your browser.

🎨 Color Converter

HEX, RGB and HSL, synced live with a preview swatch.

Open Tool →

🌗 Contrast Checker

WCAG AA/AAA pass-fail for any text/background pair.

Open Tool →

🌈 Gradient Generator

Linear and radial CSS gradients with live preview.

Open Tool →

🌥️ Box Shadow Generator

Shape a CSS box-shadow visually, then copy the code.

Open Tool →

🎛️ Palette Generator

Shades, tints and harmony palettes from one base color.

Open Tool →

🔲 Border Radius Generator

Independent corner radii with live preview and CSS.

Open Tool →

🎲 Random Color Generator

Generate random colors with HEX, RGB and HSL values.

Open Tool →

👁️ Color Blindness Simulator

Preview a color under protanopia, deuteranopia and tritanopia.

Open Tool →

🎛️ CSS Filter Generator

Build a filter() value visually with live preview.

Open Tool →

✂️ CSS Clip-Path Generator

Common clip-path shapes with live preview and CSS.

Open Tool →

🔡 PX / EM / REM Converter

Convert between pixels, em and rem for CSS.

Open Tool →

📐 Aspect Ratio Calculator

Scale dimensions proportionally and simplify ratios.

Open Tool →

🔠 Font Pairing Tool

Curated Google Font heading/body pairings with preview.

Open Tool →

🧊 Glassmorphism Generator

Frosted-glass card CSS with blur, tint and border controls.

Open Tool →

▦ CSS Grid Generator

Visual grid-template-columns/rows builder with live preview.

Open Tool →

🧩 CSS Flexbox Generator

Visual flexbox property builder with live preview.

Open Tool →

🔺 CSS Triangle Generator

Border-trick CSS triangles in any direction and color.

Open Tool →

🔤 CSS Text Shadow Generator

Text-shadow offset, blur and color with live preview.

Open Tool →

🔘 CSS Button Generator

Styled button CSS with padding, radius, colors and shadow.

Open Tool →

🌫️ Neumorphism Generator

Soft-UI extruded or inset shadow CSS from a base color.

Open Tool →

🎬 CSS Keyframes Animation Generator

Bounce, pulse, spin, fade and slide @keyframes CSS.

Open Tool →

🫧 SVG Blob Generator

Random organic blob shapes as copyable SVG markup.

Open Tool →