CSS

Visual editors that write a CSS value — a gradient, a shadow, an outline — from controls rather than by hand, and show it on a preview. The useful ones also measure the painted result, because a value that looks right on a swatch can still put text on a background it cannot be read against.

Generators for the CSS that paints a surface — gradients, shadows with glass and soft UI, focus rings, and SVG backgrounds of waves, blobs and patterns. Each one hands you code to paste, and each one measures what that code will actually paint before you paste it.

The colour tools decide which colours to use. These decide how a surface is painted with them, and check the result where it matters: under the text that sits on it.

A CSS generator usually stops at the code. The questions that decide whether the code works come afterwards: can the headline be read across the whole gradient, will the gradient band on a large screen, what happens in a browser that does not understand the syntax. These tools answer them in the editor, from the same pixels the preview shows.

The measurements are computed, not looked up. Contrast is read at the worst pixel behind each piece of text, with WCAG 2 and APCA side by side; banding is the count of 8-bit steps along the gradient’s real path; every export prints its size in bytes and, where a value needs one, carries a fallback guarded by @supports.

• The worst pixel decides, never the average

  A background with a light end and a dark end averages to a ratio no part of the text actually gets. Wherever text sits on a painted surface here (a gradient, glass, an SVG background), the tool reports the lowest ratio under each text box, says where it is, and offers the lightest scrim that would fix it. The focus indicator checker holds rings to the same rule: it counts only the pixels that change by 3:1.

  Of 382 presets in a popular open gradient list, 146 pass 4.5:1 on average for white or black text while failing at their worst pixel.

• Modern CSS, with the fallback written for you

  OKLCH blending and other recent syntax are used where they improve the result, and older browsers get an equivalent behind an @supports test. A custom property cannot fall back by cascade, so the variable export never relies on it.

  Gradient colour-space interpolation needs Chrome 111, Safari 16.2 or Firefox 127; Tailwind v4 itself targets Chrome 111, Safari 16.4 and Firefox 128.

• One engine under every CSS tool

  The gradient, shadow and SVG background generators share one preview surface and one contrast sampler, so a hero, a card and a button look and measure the same way whichever of them painted it. All four tools share the export panel and the shareable link, so a link opens exactly the state that was shared.

1. 1

   Decide the colours first

   Choose the palette in the colour tools, where contrast between pairs is the subject. Bring the hex values here to decide how the surface is painted with them.

2. 2

   Preview on the element it is for

   Switch the preview between hero, card and button. A gradient that suits a full-width hero often bands or crowds the text on a 320-pixel card.

3. 3

   Fix what the readout names

   Change the stop nearest the worst pixel, the text colour, or add the scrim the readout gives. Re-read the figure rather than the look.

4. 4

   Export in the form your project uses

   Plain CSS, custom properties, a Tailwind v4 utility or an inline style. Check the byte count; grain and fallbacks are worth their size, decoration may not be.

• You need a background behind a headline

  Gradient generator

  It measures the headline at the least legible pixel of the gradient, not at its average.

• Two brand colours turn muddy when blended

  Gradient generator

  OKLCH keeps the chroma through the middle, with a fallback for older browsers.

• A soft multi-colour backdrop for a landing page

  Gradient generator

  Mesh mode stacks radial layers in plain CSS or SVG, with the bytes shown.

• You want a ready-made gradient that text can sit on

  Gradient library

  Each one shows its audit: white or black text at the worst pixel, the colour kept through the middle, banding and bytes. Filter by colour, mood and kind, then copy the CSS or open it in the generator.

• Cards and inputs need depth that survives dark mode

  Box shadow generator

  It measures the edge on each side and builds a dark twin that lifts and rings the surface instead of darkening a dark page.

• Text has to sit on frosted glass

  Box shadow generator

  Glass mode measures each line through the blur at its least readable pixel, over a backdrop you choose or upload.

• A hero needs waves, blobs or a repeating pattern behind the headline

  SVG background generator

  It draws from a seed kept in the link, optimises the file with SVGO, and measures the headline at its least legible pixel over the shapes.

• Keyboard focus has to show on every background you use

  Focus indicator checker

  It measures the ring as WCAG 2.4.13 defines it — the pixels that change by 3:1, against a 2px perimeter — on light, dark, brand and image backgrounds at once.

• The CSS colour module, level 4, blends hex, named, rgb() and hsl() stops in gamma-encoded sRGB for compatibility; any other colour or an explicit in oklch switches to a perceptual space.

• Chromium and WebKit dithered a 1440-pixel dark gradient when measured on 8 October 2026; a renderer that does not dither shows bands up to 72 pixels wide on the same gradient.

• Of 382 open gradient presets measured, 38 lose over half their chroma through the middle in sRGB, and all 38 keep it in OKLCH.

• On a slate-800 card over a slate-900 page, each of Tailwind v4’s six shadow sizes adds under 0.06 to the 1.22:1 edge the two colours already give: in dark mode a shadow has almost nothing left to darken.

• Two of the largest SVG background generators, Haikei and fffuel, gave files that SVGO shrinks by 48% and 38% when measured on 8 October 2026, and neither keeps the shape in its link.

• WCAG 2.2 Focus Appearance is success criterion 2.4.13, Level AAA. The “2.4.11 Focus Appearance (Minimum), AA” many guides still quote was draft text, renumbered and moved to AAA in May 2023, before WCAG 2.2 was published.

• Reference

  Gradient library

  Curated gradients, each with its audit shown.

• 9 tools

  Colour

  Check it, fix it, extract it, turn it into a system.

• 3 tools

  Typography

  Pairing, scale, readability and font identification — measured the same way.

• 3 tools

  Branding

  Marks, codes and sheets — the things that carry the brand.

• 6 tools

  Writing

  Resumes, cover letters, word counts and interface copy, held to the same standard as the pixels.

• 15 tools

  PDF

  Merge, split, protect and convert — none of it uploaded.

• 3 tools

  Video & audio

  Trim, extract and convert — decoded by your own browser, not a server.

• 14 tools

  Converters

  Change a file’s format or size, or a length’s unit, without anything leaving your device.