CSS
Shadows, radii, grids, buttons and patterns, each with a preview drawn from the same numbers as the CSS, so what you see is what the rule will do.
- Box Shadow GeneratorA shadow, and the line of CSS that makes it.
- Border Radius GeneratorFour corners, one line of CSS.
- CSS Button GeneratorA button, its CSS, and whether the label is legible.
- CSS Grid GeneratorColumns, rows, gap, and the CSS for them.
- CSS Pattern GeneratorBackgrounds made of gradients, not images.
About css
A CSS generator is only useful if you can trust the preview, and most of them cannot be trusted, because the preview and the output are built separately and drift apart.
Everything here draws its preview from the same values it writes into the CSS. Where the two formats disagree, the difference is handled rather than ignored: a CSS blur radius is twice the standard deviation of the Gaussian behind it, so the preview halves it, and a preview that passed the number straight through would be about twice as soft as the rule it was previewing.
The same applies to the parts that are easy to get subtly wrong. A percentage border radius resolves against each axis separately, so fifty percent on a rectangle is an ellipse and not a circle. A checkerboard needs its second gradient layer offset by half a tile or it renders as diagonal bands. An auto fit grid has no column count of its own, so the preview states the container width it is assuming instead of quietly picking one.
Colours are handed back exactly as they were typed. Someone who wrote an rgba value wants that in their stylesheet, not the hex it happens to convert to, and the value is still parsed so an unusable one is refused rather than pasted into a stylesheet where it silently does nothing.
Everything runs in the page. Nothing you type is sent anywhere, and there is no limit on how many rules you generate.