CSS generators

CSS you can see before you write it

Some CSS properties are much easier to design by eye than by number. A shadow that looks right, a gradient with the right angle and stops, corners that are round enough but not too round: you get there by trying. These generators let you adjust the values with sliders and colors, see the effect on a preview and copy the finished code, instead of editing numbers and reloading the page.

Box shadow

The box-shadow property takes an horizontal offset, a vertical offset, a blur radius, a spread radius and a color, plus an optional inset keyword that puts the shadow inside. Soft, natural shadows use a low opacity with a large blur and a small vertical offset, as if light comes from above. A hard shadow with no blur gives a flat, retro look. Use the presets as starting points.

Gradients

A gradient blends two or more colors. A linear one follows an angle, so 90 degrees goes left to right and 180 goes top to bottom. A radial one spreads out from a point, and a conic one sweeps around a point like a color wheel. Each color has a position from 0 to 100 percent, and you can add a third color. The code includes a plain background color first, as a fallback for the rare browser that does not understand gradients.

Border radius

The border-radius property rounds the corners. One value rounds all four equally, and four values set each corner separately, starting at the top left and going clockwise. Use pixels for a fixed curve or percentages for a shape that scales with the element, where 50 percent on a square gives a circle.

Glass effect

The frosted glass look, often called glassmorphism, combines a translucent background, a blur of whatever is behind it with backdrop-filter, and a thin light border. It needs something colorful behind it to look good, which is why the preview shows a gradient. It is supported in all modern browsers, and the generated code includes the prefixed version for older Safari.

Good to know

Heavy blur and large shadows on many elements can slow down scrolling on weak devices, so use them sparingly. Check that text on a glass panel keeps enough contrast with our contrast checker. Everything runs in your browser and there is nothing to install.