Design & CSS

Colour work for the browser. Convert between HEX, RGB and HSL, pick a value and read it back in whichever notation your stylesheet wants, without hunting for the format a design tool exported.

Two things here are worth more than the conversion itself. HSL is the only common notation where adjusting a colour is intuitive, because holding the hue and changing the lightness gives you a genuinely darker version of the same colour rather than a guess. And contrast ratio is the one part of colour work that is not a matter of taste: 4.5:1 for body text, 3:1 for large text, checked rather than eyeballed. Low-contrast text is the most common accessibility failure on the web, and the easiest to catch before it ships.

Type is the other half. A single CSS clamp() line can slide a font size between a minimum and a maximum as the viewport changes, which removes a stack of breakpoints — but the middle term is easy to get wrong by hand, and wrong means text that stops scaling or scales past its bounds.

The rest are generators for the things people otherwise copy from a codepen and cannot then adjust: spinners, dots and progress bars in pure CSS with a reduced-motion fallback already written; stripes, polka dots, grids and cross-hatching built from gradients rather than an image; organic SVG blob shapes from a seed; and a cubic-bezier() easing curve you drag rather than guess, which shows you where it overshoots before you ship it.

And one that is not about making anything: seeing an image or a palette as someone with deuteranopia, protanopia, tritanopia or achromatopsia sees it. Around one man in twelve has some form of colour blindness, so a chart whose only distinction is red against green is unreadable to a real share of the people who open it.

And when a rule does not apply, specificity is one of the first things to check. Selectors, or a whole stylesheet with its nested rules, can be scored as IDs, classes and types, with :is(), :where(), :has() and the nesting selector & counted as Selectors Level 4 and CSS Nesting define them, and the most specific one is named.

Colour Converter & PickerConvert a colour between HEX, RGB, HSL, OKLCH, LAB and CMYK, check its contrast against white and black, and build shades and harmonies.Fluid Type clamp() GeneratorTurn a min and max size into one CSS clamp() line that slides between them, with the maths shown, a live preview and the size at every viewport.Aspect Ratio & Resolution CalculatorReduce any size to its aspect ratio and name it, resize keeping it with even rounding, fit it into a frame with letterbox maths, and get PPI from a diagonal.CSS Gradient GeneratorBuild linear, radial and conic gradients with unlimited stops, hints and colour spaces, or paste one to edit. Copy CSS with a fallback or Tailwind v4 classes.cubic-bezier EditorDrag a CSS cubic-bezier() easing curve or paste one to edit, see where it overshoots, and copy it for CSS, Tailwind, Motion, SwiftUI or Jetpack Compose.Box Shadow GeneratorLayer box shadows with inset, blur and spread, preview live, build a smooth multi-layer shadow, import existing CSS and copy CSS or the matching Tailwind class.Border Radius & Clip-Path GeneratorShape a box two ways: eight-value border-radius blobs with the browser’s overlap scaling shown, and polygon, circle, ellipse and inset clip-paths you can edit.Color Palette & Shades GeneratorBuild a Tailwind-style 50–950 scale from one colour in OKLCH, with tints, shades, tones and harmonies, and export it as CSS variables, @theme, SCSS or JSON.WCAG Contrast CheckerCheck text and UI colours against WCAG 2 AA/AAA and the APCA Lc scale, with translucency composited, and get the nearest passing colour for either side.Colour Blindness SimulatorSee an image or a palette as someone with deuteranopia, protanopia, tritanopia or achromatopsia would, and find the colours that stop being told apart.CSS Loader GeneratorPure-CSS spinners, dots, bars and progress loaders: set size, colour and speed, and copy accessible HTML and CSS with a reduced-motion fallback built in.SVG Blob GeneratorMake smooth, organic SVG blob shapes from a seed: set the points, randomness and smoothness, fill, grade or outline it, and copy SVG, path data or a clip-path.Background Pattern GeneratorStripes, polka dots, grids, checkerboards and cross-hatching in pure CSS gradients: set the colours, size and line width, and copy background declarations.CSS Specificity CalculatorScore CSS selectors as IDs, classes and types, see which is most specific, and paste a whole stylesheet: nested rules count & as the rule they sit in.Glassmorphism & Neumorphism GeneratorGlass panes with backdrop blur, tint and border, and neumorphic surfaces lit from a corner: sliders to CSS and Tailwind, plus the readability checks both need.px ↔ rem ↔ em ↔ pt & Tailwind SpacingConvert px, rem, em, %, pt and print units at any root or parent font size, and map a length onto Tailwind’s spacing grid, text sizes, tracking and breakpoints.