CSS & Design
Every CSS & Design tool on Toolz.dev: 9 free utilities that run entirely in your browser. No signup, no uploads, no downloads.
A CSS generator turns a visual effect you can see into the declaration that produces it. Every property here is one you could write by hand; the reason not to is that the interesting ones take several numbers whose relationship is impossible to hold in your head. A box shadow has an x offset, a y offset, a blur, a spread and a colour with an alpha, and the difference between a shadow that reads as depth and one that reads as a smudge is a few pixels across two of those five.
The generators split into three groups. Surface effects give an element its material: rounded corners, box shadows, frosted glass and soft extruded plastic. Colour effects change what is painted: gradients and CSS filters. And two tools deal in numbers rather than looks: the CSS unit converter and the clamp() generator, which is the one that removes the most code from a stylesheet.
CSS generators by the effect they produce
| Effect | Property it writes | Tool |
|---|---|---|
| Rounded corners, one radius per corner | border-radius | Border Radius Generator |
| Depth, elevation, glow | box-shadow | Box Shadow Generator |
| Readable text on an image | text-shadow | Text Shadow Generator |
| Frosted, translucent panel | backdrop-filter with rgba background | Glassmorphism Generator |
| Soft extruded surface | Two opposing box-shadows | Neumorphism Generator |
| Colour transition | linear, radial or conic gradient | Gradient Generator |
| Blur, brightness, saturation, hue | filter | CSS Filter Generator |
| Type that scales with the viewport | clamp() with vw and rem | CSS Clamp Generator |
| A number in different units | px, rem, em, pt, % | CSS Unit Converter |
Fluid sizing without media queries
clamp() takes a minimum, a preferred value and a maximum, and the preferred value is where the work happens. To scale a heading from 24px at a 320px viewport to 48px at 1280px, the preferred value has to be a straight line through those two points, which in CSS means a vw term plus a fixed term: the vw part supplies the slope, and the fixed part supplies the intercept the slope alone would miss. The clamp generator does that arithmetic from the four numbers you actually know.
This replaces the three or four breakpoints most stylesheets spend on font sizes, and it behaves better between them, since a media query steps and a clamp slides. Keep the fixed term in rem rather than px: a preferred value made only of vw ignores the user browser font size setting, which fails WCAG 1.4.4 at 200% zoom. Setting the minimum and maximum in rem for the same reason means the unit converter is usually the tool you open first, since design tools hand you pixels.
Shadows, and why one is rarely enough
A real object casts more than one shadow: a tight dark one where it meets the surface and a wide soft one further out. A single box-shadow can only be one of those, which is why an interface shadow made from one declaration looks flat or muddy. Layering two or three, each with a larger blur and a lower alpha, is what produces elevation that reads correctly, and it is exactly the technique the neumorphism generator formalises by placing a light shadow and a dark shadow on opposite corners.
Neumorphism carries a well-known accessibility problem worth stating plainly: because the control and its background are the same colour, the only thing separating them is a shadow, and shadow is not contrast. A button that exists purely as an extrusion can fail WCAG 1.4.11 for non-text contrast and disappears entirely in a high-contrast mode. Use it for decorative surfaces and give anything interactive a real border or a colour change as well. The same caution applies to glassmorphism, where legibility depends on whatever image happens to be behind the panel.
Browser support and the prefixes that still matter
Most of these properties have been stable for a decade and need no prefix: border-radius, box-shadow, text-shadow, gradients and filter are safe everywhere. backdrop-filter is the exception. Safari has required the -webkit-backdrop-filter prefix since it shipped the property first, and it is still the version some WebKit builds honour, so the glassmorphism output emits both declarations. A frosted panel with no fallback background colour becomes unreadable text on a transparent box wherever the property is unsupported, so keep a solid rgba background underneath it.
Gradients have one more trap that has nothing to do with support. A two-stop gradient between complementary colours passes through grey in the middle, because interpolation happens in sRGB by default, and a gradient across a small hue range bands visibly on a large surface. Adding a middle stop in a colour you chose yourself fixes both, which is why the gradient generator lets you place stops rather than only endpoints. Everything here runs client-side, and the output is plain CSS you own with no runtime, no build step and no dependency.
Frequently asked questions
- Should I use px, rem or em in CSS?
- Use rem for anything that should respect the user font size setting, which means type, spacing and layout limits. em is for values that should scale with the element own font size, such as padding inside a button. px is correct for things that are genuinely fixed, such as a one-pixel border or a shadow offset. The default root size is 16px, so 1rem is 16px until someone changes it.
- Does clamp() replace media queries for typography?
- For font sizes, usually yes. clamp() scales continuously between a minimum and a maximum, so it covers every viewport width rather than the three or four you picked breakpoints for. Media queries are still the right tool for changes that are not a smooth number, such as swapping a two-column grid to one column or hiding an element entirely.
- Is backdrop-filter supported in all browsers?
- Yes in current Chrome, Edge, Firefox and Safari, but Safari needs the -webkit-backdrop-filter prefix, which the generator emits alongside the standard property. Always keep a semi-opaque background colour on the same element, because where the filter is unavailable that colour is the only thing standing between your text and whatever is behind it.
- Why does my neumorphic button fail an accessibility check?
- Because shadows are not contrast. Neumorphism gives a control the same colour as its background and separates them with light and dark shadows, which contrast checkers do not count and high-contrast modes remove. WCAG 1.4.11 asks for a 3:1 ratio on the visual boundary of a control, so add a border or a colour change to anything clickable and keep the extrusion for decoration.
- Why does my gradient look grey or banded in the middle?
- Because CSS interpolates gradients in sRGB by default, and the straight line between two saturated complementary colours passes near grey. Add one or two intermediate stops in colours you choose to steer the path, which also breaks up the visible banding that appears when a narrow hue range is stretched across a large surface.
- Do I need vendor prefixes for these properties?
- Only for backdrop-filter, where Safari still uses -webkit-backdrop-filter. border-radius, box-shadow, text-shadow, filter and gradients have been unprefixed in every current browser for years, and the old -moz and -webkit variants for those are dead weight in a stylesheet today.