Color & Design

HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only

HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.

Font pairing generator — 50+ curated Google Fonts pairs (heading + body) with live preview, classifications, CSS export.

WCAG color contrast fixer — input fg/bg, get current ratio, auto-suggest 4 fixed colors hitting AA/AAA while preserving hue.

Gradient mesh generator — 4-12 control points with bilinear blend, output as SVG, PNG, CSS multi-radial-gradients fallback for older browsers.

Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.

Visual CSS box-shadow builder — multi-layer, inset, color/blur with live preview.

Color mixer — blend any two colors with adjustable ratio, RGB/HSL/LAB color space, predict the result and copy hex.

Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.

CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.

Emoji mashup — combine two emojis to make a new one (Unicode-only, no Google API, with 500+ pre-defined combos).

Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.

Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.

CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.

CSS grid visual generator — drag to set columns/rows, place grid-area named regions, copy ready CSS + HTML, with 12 layout templates.

CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind.

CSS font stack generator — system-safe font families with full Win/Mac/Linux/Android/iOS fallback chains, with CJK fallbacks, copy as CSS/Tailwind/SwiftUI.

CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview.

CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.

Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.

Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.

Social media aspect ratio guide — Instagram / TikTok / YouTube / X / LinkedIn / Xiaohongshu / Bilibili exact pixel dimensions and ratios.

Piano chord finder — type any chord (Cmaj7, F#m, Bdim) and see the keys highlighted on a piano, with notes and inversions.

Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only

Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export

Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string

Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only

CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.

Pure-CSS geometric backgrounds — dots, grid, stripes, checkerboard, diagonal, cross — live preview, one-click copy, zero images

Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only

Score any CSS selector as an (a, b, c) triple, compare which rule wins the cascade, and see exactly which digit decided it — browser-only

Paint a gradient INTO your text with background-clip: text — live preview, font size/weight, copy cross-browser CSS with -webkit- prefixes.

Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only

Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.

Extract, dedupe, and export css variables from pasted text or uploaded local files.

Convert css variables from pasted text or uploaded local files.

Validate and explain issues in css variables from pasted text or uploaded local files.

Normalize, sort, and prepare css variables from pasted text or uploaded local files.

Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.

Split any length by φ = 1.618 — long/short segments, golden sequence, font scale, layout columns, golden rectangle — browser-only

Find duplicates and keep one clean copy of hex colors from pasted text or uploaded local files.

Extract, dedupe, and export hex colors from pasted text or uploaded local files.

Convert hex colors from pasted text or uploaded local files.

Validate and explain issues in hex colors from pasted text or uploaded local files.

Normalize, sort, and prepare hex colors from pasted text or uploaded local files.

Image cropper — drag to crop, fixed ratios (1:1 / 16:9 / 9:16 / 4:3), zoom, rotate, fully client-side.

Image format converter — JPG ↔ PNG ↔ WebP ↔ AVIF, batch + transparent background handling, 100% client-side.

Image resizer — resize JPG/PNG/WebP by pixels/%/preset, fully client-side, no upload.

Image watermark — text or image watermark with position grid, opacity, tile mode, batch processing.

Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only

Generate smooth SVG wave dividers for landing pages — adjustable waves, amplitude, layers, seed — flip top/bottom — export SVG / CSS — browser-only

Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only