🎨 CSS & Design Tools

Design linear and radial CSS gradients visually and copy the ready-to-use code, with colour-stop control and the interpolation trick that avoids grey midpoints.

Create CSS box-shadow effects visually with a live preview and copyable code, covering layered shadows, inset shadows and what makes a shadow look real.

Generate matching colour palettes — complementary, triadic, analogous and more — from one base colour, with the colour theory behind each scheme.

Generate a responsive CSS clamp value for fluid font sizes and spacing, scaling smoothly between two viewport widths without media queries.

Design a custom CSS easing curve by dragging control points, with a live preview and the common presets — plus what makes an easing curve feel natural.

Minify CSS to shrink file size or beautify it with clean indentation, showing the byte saving and what a minifier can and cannot safely remove.

Build CSS Flexbox layouts visually and copy the code, with each property explained and the common centring and spacing patterns ready to use.

Create CSS Grid layouts by choosing rows, columns and gaps, then copy the code — with the fraction unit and auto-fit patterns that make grids responsive.

Design frosted-glass card effects with blur and transparency and copy the CSS — including the contrast problem the style creates.

Generate random organic blob shapes as SVG for backgrounds and decoration, with control over complexity and randomness.

Create smooth SVG wave shapes for section dividers and hero backgrounds, with control over amplitude, frequency and layering.

Design CSS text-shadow effects visually with a live preview, from subtle legibility shadows to neon glow and layered 3D extrusion.

Round element corners visually and copy the CSS border-radius, including the eight-value syntax that produces organic blob shapes rather than plain rounding.

Check the contrast ratio between two colours against the WCAG accessibility standards, with the pass and fail thresholds for normal and large text.

Browse every CSS named colour sorted by hue, search them, and find the nearest name for any colour you have.

Convert between screen RGB and print CMYK in both directions, with a total ink coverage warning for values that will not print cleanly.

Pull the dominant colour palette from any image, with swatches, CSS variables and a matching gradient — processed entirely in your browser.

Check a text and background pair against WCAG contrast and get the closest passing fix that keeps your hue instead of replacing the colour.

Audit a whole palette at once — every text and background pairing with its WCAG ratio in a single grid, so you can see which combinations are usable.

Generate text-stroke outlines, neon glow, gradient fills, 3D extrusion, long shadows and neumorphic text, with copyable CSS.

Generate a design-token stylesheet with 10-step colour scales, a type scale, spacing, radii and shadows — the foundations of a consistent design system.

Turn any colour into tint, shade and tone ramps, or blend two colours into a stepped mixing scale — the basis of a systematic design palette.

Generate page layouts — holy grail, sticky footer, sidebar — plus multi-column text and media-query breakpoints, using modern Grid rather than old hacks.

Generate mesh gradients, repeating patterns — stripes, dots, grids, zigzag — and blend-mode backgrounds in pure CSS, with no image files needed.

Generate ready-to-paste buttons, toggle switches, tooltips, loading spinners and custom scrollbars, with the accessibility details these usually omit.

Generate CSS shapes — clip-path presets, border-trick triangles, organic blobs and aspect-ratio boxes — with the trade-offs of each technique.

Build CSS keyframe animations, transitions and transforms with a live preview and copyable code, including which properties are cheap to animate.

Build CSS filter effects with live sliders and presets — blur, brightness, saturation, hue rotation and drop shadow — and see the order-dependent result.

Convert a colour temperature in Kelvin to its RGB colour, with lighting presets from candlelight to overcast sky, and why higher numbers look cooler.

Check targets against WCAG 2.2, plus why the 24 pixel rule is really about centre distance and why smaller icons save no space at all.

Tune stiffness, damping and mass with a live curve, plus the measurement: critical damping is not the fastest way to settle, and something near 0.78 is.

Plan a staggered animation and see the tail, plus why a delay that works on eight items adds two seconds on forty.

Work out how tall a parallax layer must be, plus why a half-speed layer needs twice the viewport and a hand-picked 120 per cent never works.

Convert between px, pt, em, rem and the rest, plus why only every third point size is a whole pixel and why em compounds when you nest it.

Build a modular type scale, plus the arithmetic: the ratio is a budget rather than a flavour, and whole pixels are a divisibility question.

Set a readable measure and a baseline grid, plus why a 45 to 75 character line pins your column width and why almost no line-height fits a grid.