Frontend & CSS

Tools for the browser side of the stack: fluid type and spacing with clamp(), Tailwind colour scales built in OKLCH, flexbox and grid playgrounds, easing curves and springs, gradients, shadows, keyframes, meta tags and a code beautifier. Everything previews live and outputs clean CSS.

Where it is used: Used on the browser side: fluid type, colour scales, layout, motion and meta tags, with live previews and clean copy-paste CSS.

Frontend & CSS on BackendBench: px, rem and clamp() (fluid type and spacing, type scales); Tailwind palette generator (50-950 shades from one colour (oklch)); Easing curve visualizer (cubic-bezier, springs and linear()); Flexbox playground (visual flexbox with copyable css); CSS grid generator (responsive auto-fit grids and gaps); Palette & colour-blind check (harmonies and cvd simulation); Meta & Open Graph tags (seo and social tags with previews); Markdown table generator (csv or excel to an aligned table); Code beautifier (format js, css, html, json; minify css); CSS animation builder (@keyframes with live preview); Image to Base64 (data uri for html, css, markdown); CSS gradient generator (linear, radial and conic gradients); Box shadow generator (layered, soft shadows with preview). Each one is free, needs no sign-up and runs entirely in your browser, so nothing you enter is uploaded.

Layout and type (3)Colour and style (4)Motion (2)Content and assets (4)