Frontend tools
4 tools that run in your browser. Nothing to install, nothing uploaded.
- Box Shadow GeneratorBuild a box-shadow that reads as light rather than a smudge.
- CSS clamp() CalculatorGenerate a clamp() value that scales type between two viewports.
- CSS Grid GeneratorBuild a grid that reflows on its own, with no media queries.
- Flexbox PlaygroundGet flexbox CSS, and see which axis each property is talking about.
Generators for the properties people get wrong
Every builder here exists because the syntax is the easy part and the judgement is not. A box shadow is four lengths and a colour, and the reason most hand-written shadows look like a grey band is that the opacity is too high and the blur too small. A grid is one declaration, and the reason a card layout overflows on a phone is a fixed minimum track width with nothing allowing it to shrink. A clamp value is a straight line between two points, and the reason fluid type breaks accessibility is a preferred value with no rem component, which makes the text ignore the reader browser font setting entirely. Each tool sets the sensible default and explains what the setting actually does.
Fluid values, and the accessibility trap inside them
Fluid typography scales a size smoothly between two viewport widths instead of stepping at breakpoints, and it is genuinely better for most text. The trap is that the obvious implementation uses viewport units alone, and a font size expressed purely in vw does not respond to the browser font size at all. Anyone who has increased their default text size, which is a large number of people over about forty, gets no benefit from it whatsoever. Keeping a rem term in the preferred value fixes it completely and costs nothing, which is why every clamp value generated here has one. The same applies to spacing: padding that ignores the reader font size gets tight the moment the text grows.
Layout without media queries
Grid with auto-fit or auto-fill lets the browser decide how many columns fit, so a card layout reflows on its own and the media queries you would otherwise write for it disappear. Two details make the difference between one that works and one that does not. The minimum track width has to be wrapped so it can shrink below itself on a narrow screen, or the grid overflows the viewport. And auto-fit and auto-fill differ in exactly one case: when there are fewer items than columns, auto-fit collapses the empty tracks so the items stretch, while auto-fill keeps them so the items stay narrow. Neither is correct in general, and picking deliberately is quicker than discovering it later.
Flexbox confusion is nearly always about the axis
Almost every flexbox question comes down to one thing: justify-content works along the main axis and align-items works across it, and setting flex-direction to column swaps which is which. Once that is clear, the remaining surprises are short. Items shrink below their content size by default, so text squashes until you set a minimum width or stop it shrinking. align-content does nothing at all until wrapping is enabled, because a single line has nothing to distribute. And gap applies only between items, never at the outer edges, which is what makes it easier to reason about than margins on children.