Color & CSS tools
Average & Dominant Color Extractor
Upload an image and get both its average color (all pixels blended together) and its dominant color palette (the most common color clusters) side by side — with HEX, RGB, and HSL for each, one click to copy.
Background Pattern Generator
Build a pure-CSS background pattern (dots, grid, lines, checks, diamonds) with an opacity slider on both the pattern and background color — checked directly, a popular pattern generator has no opacity control at all, so a subtle texture means hand-editing the CSS into rgba(). A sample-text overlay toggle also shows the pattern behind real headline copy so you can catch readability problems before shipping it.
Border Radius Generator
Free CSS border-radius generator with independent horizontal/vertical control on all 4 corners (elliptical corners) — several simpler generators we checked only support a single radius value per corner, no elliptical split. Also switches between px and % units, so you can make responsive shapes (like a true circle) that most fixed-px tools can't.
Box Shadow Generator
Free CSS box-shadow generator that starts from a real preset, not a blank canvas — every generator we checked (e.g. front-end-tools.com) makes you dial in x/y/blur/spread/color from zero every time. Pick Material elevation, Neumorphism, or Long shadow and adjust from there. Supports up to 3 layered shadows, each individually toggled on/off, with inset support.
Checkbox Style Generator
Generate a custom-styled checkbox that hides the native input with opacity:0, not display:none — verified directly that display:none removes a checkbox from the keyboard tab order entirely (a .focus() call on it silently fails), while opacity:0 keeps it fully keyboard- and screen-reader-accessible. Includes :focus-visible and :indeterminate styling by default.
Clip Path Generator
Pick a preset shape (triangle, star, arrow, speech bubble, or circle/ellipse/inset) and edit every point or parameter with a plain number input instead of dragging a mouse — checked directly, a popular clip-path tool has no numeric input at all, no copy button, and no -webkit-clip-path prefix in its output. This one includes all three.
Color Mixer
Mix two colors two ways at once — plain RGB averaging, and OKLab, the color space CSS's own color-mix() actually defaults to — shown side by side with each result's chroma, so you can see exactly why RGB averaging looks muddier (mixing red and green in RGB gives a chroma of 0.126, about half of either source color).
Color Shade Generator
Generate a lighten/darken scale from any color two ways at once — traditional HSL, and perceptually uniform OKLCH — shown side by side, so you can actually see why HSL's brightness steps look wildly inconsistent from one hue to the next (yellow and blue at identical HSL lightness differ in real brightness by about 13x).
Color Unmixer
See a color you like and wonder what two colors would mix together to make it? Pick the target — no need to already know one of the ingredients, unlike similar reverse-mix calculators — and get two candidate colors, with a live preview proving they mix (in the same OKLab model as Color Mixer) back to exactly that color, not an approximation.
Contrast Checker
Check text/background contrast against both WCAG 2.x (today's legal/practical standard) and APCA (its documented WCAG 3 successor) at once — because WCAG 2.x's formula is known to overstate contrast for darker color combinations (verified directly: gray #7d7d7d text on black passes WCAG AA at 5.10:1, but scores a weak APCA Lc of -33.3, well below what's needed for reliable body text).
CSS Triangle Generator
Free CSS triangle/arrow generator with a full 0-360° rotation slider — we checked a popular competitor (10015.io) directly and it only offers 8 fixed preset directions with no arbitrary angle control. It also solves a limitation that competitor's own docs admit: a border-trick CSS triangle 'can't have box-shadow' because it's a 0x0 element — this tool uses filter: drop-shadow() instead, which follows the actual rendered triangle shape correctly.
Cubic Bezier Generator
Drag the curve or type exact numbers into 4 coordinate fields — checked directly, a popular cubic-bezier tool has zero number inputs anywhere, mouse-drag only. Includes 24 named easings.net presets (Sine/Quad/Cubic/Quart/Quint/Expo/Circ/Back) beyond the usual 5 basics, and a real card UI you can play to feel the motion instead of watching an abstract dot.
Glassmorphism Generator
Pick any tint color for your frosted-glass CSS — checked directly, the original glassmorphism.com generator has no color control at all, its output is permanently white glass. Every slider here (tint opacity, blur, border opacity, radius) shows its live value and pairs with a number input, unlike a second competitor whose sliders have zero visible values anywhere. No login required.
Gradient Generator
Free CSS gradient generator supporting linear, radial, AND conic gradients — we checked two popular generators (cssgradient.io, 10015.io) directly and neither supports conic at all. It also includes an optional 'Animate' toggle: since browsers can't interpolate gradient colors via transition, this uses a background-position shift trick to make the gradient visibly move, something no competitor we reviewed offered — paired with a prefers-reduced-motion guard.
HEX to RGBA Converter
Convert between HEX, RGB, RGBA, and HSL instantly — edit any format and the other three update live, with a built-in picker and alpha slider.
Loader Generator
Generate a CSS loading spinner that includes accessibility markup by default — role="status", a screen-reader-only "Loading…" label, and a prefers-reduced-motion block that stops the animation — instead of leaving it up to you (a well-known competitor's output, checked directly, is a bare <div class="spinner"></div> with none of that).
Switch/Toggle Generator
Generate a sliding toggle switch with role="switch" and a real label included by default — checked directly, a popular competitor's generated code is a bare, unlabeled <input type="checkbox"> with neither, so screen readers announce it as an unnamed checkbox instead of "switch, on/off", the exact metaphor the visual design promises.
Text Glitch Effect Generator
Free CSS glitch text generator with three effect types (RGB-split color, noise, transform), adjustable intensity and speed, and one-click code copy — a popular competitor (CSS Portal) has no copy button and no speed/intensity control at all. It also respects accessibility: toggle 'Reduce motion' to preview the static look, and every copied snippet includes its own prefers-reduced-motion media query, which we checked and found missing from every competitor we reviewed.
From the blog
A high-contrast photo can average out to muddy gray. That's not a bug — dominant color is the number you actually want.
Average blends every pixel into one value; dominant finds the most common color cluster. Most tools show only one and never explain why a busy image's "color" looks nothing like what you'd point at.
2026-09-09 We checked a popular CSS glitch text generator's code block. There's no copy button.
A widely-linked CSS glitch text effect generator makes you manually select and copy its output — and like every other one we checked, its animation never stops for users with motion sensitivity turned on.
2026-09-01 Two popular CSS gradient generators. Neither one makes a conic gradient.
We checked cssgradient.io and 10015.io directly — both cap out at linear and radial. Conic gradients (the kind you need for pie charts, color wheels, and loading rings) aren't an option on either.
2026-09-01 A CSS triangle generator's own docs admit it: you can't add a shadow. We found a fix.
10015.io's triangle generator offers 8 fixed directions and flatly states box-shadow won't work on a CSS border-trick triangle. Both of those turned out to be solvable.
2026-09-01 Every CSS box-shadow generator we checked starts from zero. None of them start from a real shadow.
Material elevation, neumorphism, long-shadow — these are all real, well-known shadow styles. Every generator we checked makes you rebuild them from scratch anyway.
2026-09-01 Most border-radius generators give each corner one number. That can't make an elliptical corner.
A single radius value per corner is fine for rounded rectangles. It can't produce the stretched, elliptical corners that need separate horizontal and vertical values — and most simple generators only offer the single number.
2026-09-01 We pulled a popular toggle switch generator's output. No role, no label — just a bare checkbox.
A sliding switch looks like an on/off control, but without role="switch" and a real label, a screen reader announces it as an unnamed, plain checkbox. We checked what a competitor actually ships.
2026-08-31 We clicked a triangle's corner on a popular clip-path tool, hoping for a number field. Nothing happened.
No numeric input, no copy button, no -webkit-clip-path — three things we checked directly on a widely used clip-path generator before building our own.
2026-08-31 A popular background pattern generator has no opacity slider. We checked, then built one that does.
Both colors on a widely used CSS pattern tool are plain hex — no way to make a subtle 10% texture without hand-editing the CSS. We also added a toggle to preview real text over the pattern.
2026-08-31 We counted the inputs on a beloved cubic-bezier tool. Four — none of them let you type a coordinate.
document.querySelectorAll('input') on a popular easing curve editor turned up 4 fields — a hidden copy buffer, a duration slider, nothing for the actual curve. Dragging is the only way in.
2026-08-31 The site that coined "glassmorphism" only lets you make white glass. We checked its own generator.
Its Settings panel has Blur, Refraction, and Depth sliders — and nothing for color. The output is permanently rgba(255,255,255,...). A second competitor's sliders show no numbers at all.
2026-08-31 Yellow and blue at the exact same HSL lightness. One is 13 times brighter than the other.
We ran the actual WCAG luminance numbers: HSL 60° and HSL 240°, both at 50% lightness. The real brightness gap between them is not subtle — and it's why most "darken/lighten" tools produce inconsistent palettes.
2026-08-30 Mix red and green the way most color mixer tools do, and you lose about half the color's vividness
We checked one popular color mixer's three blend modes. None of them match what CSS's own color-mix() function actually defaults to — and the difference isn't subtle once you measure it.
2026-08-30 You saw a pretty color. Most "reverse color mixer" tools still make you know an ingredient first.
We checked a real color reverse calculator — it solves for a missing color, but only if you already know the other one. That's backwards from how curiosity actually works.
2026-08-30 Gray text on black passes WCAG AA at 5.10:1. The same pair scores -33.3 on the algorithm replacing WCAG.
We ran the actual numbers on a dark gray-on-black combo. WCAG 2.x calls it a clean pass. APCA — the perceptual algorithm slated to replace WCAG 2.x's contrast math — calls it insufficient for body text.
2026-08-30 A popular CSS spinner generator's entire output is a bare <div>. Screen readers get nothing.
We pulled the actual generated code from a spinner generator with 54 pages of styles. No role, no label, no reduced-motion guard — just a div that spins, silently, for anyone who can't see it.
2026-08-30 One CSS property choice decides whether keyboard users can check your custom checkbox at all
We hid a checkbox with display:none and called .focus() on it. Nothing happened. We did the same with opacity:0. It worked. That's the whole difference between an accessible custom checkbox and a broken one.
2026-08-30 RGB to Hex and Hex to RGB are different pages on the tool most people use. Ours is one.
A popular color converter splits RGB-to-Hex and Hex-to-RGB across separate URLs, has no alpha/transparency support, and keeps its color picker on a different page entirely. Ours does all of it, live, in one place.
2026-08-29