Design Tools

13 tools

Design and CSS tools including color pickers, gradient builders, shadow generators, and CSS utility tools.

WCAG & APCA Contrast Checker

Check color contrast with WCAG 2.1 ratios and APCA scores, simulate vision deficiencies, and auto-fix failing colors in OKLCH — fully local.

Design CSS keyframe animations visually with live preview, easing controls, and iteration settings. Exports @keyframes plus a ready class — local.

Design 8-point CSS border radii visually to create circles, organic blobs, and fancy shapes. Live preview with instant code export — fully local.

Design multi-layer CSS box shadows visually with inset support, RGBA conversion, and reorderable layers. Live preview and code export — local.

Chain CSS filters like blur, contrast, and brightness on your own image with live preview and one-click code export — processed in your browser.

Design Flexbox layouts in an interactive sandbox covering container and item properties like flex-grow and justify-content — instant CSS export.

Design 2D CSS Grid layouts visually: drag to create areas, tune fr tracks, and export clean code. Ideal for bento grids and page layouts — local.

Convert px to rem and back with adjustable base size, Tailwind class matching, fluid clamp() typography, and batch CSS conversion — fully local.

Convert SVG icons to optimized CSS data URIs in background-image, mask-image, and Tailwind formats — URI-encoded output beats base64 — local.

Generate favicons from text, emoji, or images in ICO, PNG, SVG, and PWA bundles with dark-mode variants and manifest.json included — fully local.

Create beautiful CSS gradients with a visual editor supporting linear, radial, and conic types with OKLCH interpolation and grainy texture overlay.

Generate harmonious color palettes in OKLCH with six harmony modes, a WCAG contrast matrix, and CSS, Tailwind, or JSON export — fully local.

Pick colors with an interactive HSV canvas, convert between HEX, RGB, HSL, and OKLCH, and check WCAG contrast ratios against white and black.