Color & Design for Developer
35 color & design tools hand-picked for Developer.
-
CSS Border Radius Generator
Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.
-
CSS Box Shadow Generator
Visual CSS box-shadow builder — multi-layer, inset, color/blur with live preview.
-
CSS Clip-Path Generator
Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.
-
Color Blindness Simulator
Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.
-
Color Contrast Checker
Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.
-
Color Converter
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only
-
Color Shades Generator
Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only
-
CSS Button Generator
Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export
-
CSS Filter Generator
Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string
-
CSS Grid Generator
CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.
-
CSS Keyframes Animation Generator
Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only
-
CSS Loaders Generator
CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.
-
CSS Media Query Generator
CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.
-
CSS Scrollbar Generator
Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only
-
CSS Specificity Calculator
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
-
CSS Transform Generator
CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.
-
CSS Triangle Generator
Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only
-
CSS Variable Deduplicator
Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.
-
CSS Variable Extractor
Extract, dedupe, and export css variables from pasted text or uploaded local files.
-
CSS Variable List Converter
Convert css variables from pasted text or uploaded local files.
-
CSS Variable List Validator
Validate and explain issues in css variables from pasted text or uploaded local files.
-
CSS Variable Normalizer
Normalize, sort, and prepare css variables from pasted text or uploaded local files.
-
Flexbox Playground & CSS Generator
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.
-
CSS Gradient Generator
Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.
-
Hex Color Deduplicator
Find duplicates and keep one clean copy of hex colors from pasted text or uploaded local files.
-
Hex Color Extractor
Extract, dedupe, and export hex colors from pasted text or uploaded local files.
-
Hex Color List Converter
Convert hex colors from pasted text or uploaded local files.
-
Hex Color List Validator
Validate and explain issues in hex colors from pasted text or uploaded local files.
-
Hex Color Normalizer
Normalize, sort, and prepare hex colors from pasted text or uploaded local files.
-
HTML Color Names
HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.
-
Image Format Converter
Image format converter — JPG ↔ PNG ↔ WebP ↔ AVIF, batch + transparent background handling, 100% client-side.
-
Image Resizer
Image resizer — resize JPG/PNG/WebP by pixels/%/preset, fully client-side, no upload.
-
SVG Blob Generator
Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only
-
Tailwind CSS Cheatsheet
Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.
-
WCAG Color Contrast Fixer
WCAG color contrast fixer — input fg/bg, get current ratio, auto-suggest 4 fixed colors hitting AA/AAA while preserving hue.