Making a page look finished with CSS

A plain page with default fonts and flat boxes looks unfinished, and a few well-chosen details fix most of it: colours that go together and can be read, sizes that step up evenly, a soft gradient, a shadow that lifts a card, one shaped edge. Each of these tools lets you try values on screen and gives you the CSS to copy. They run in your browser, and nothing you enter is sent anywhere.

1. Start from colours you already have

If there’s a logo or a screenshot of a design, drop it into Image Palette and choose how many Colours to pull out. Each comes with its hex code and how much of the picture it covers. Copy CSS gives them as CSS variables, ready for the stylesheet. The big areas are usually backgrounds; the small, strong ones make good buttons and links.

2. Check the text can be read

Put your text colour and background in Contrast Checker. It tests the pair by WCAG 2’s contrast ratio and by APCA, and when a pair fails it suggests the nearest text colour that passes. A mid grey such as #8a8a8a on white looks fine to many people but fails WCAG AA for normal text at 3.45 : 1. Check every pair you will use, including text on buttons, and a grey on a gradient or a photo at its worst spot. A pale grey for “quiet” text is the usual failure. Is my page accessible? covers checks beyond colour.

3. Set the sizes with a type scale

Headings that are sized by eye tend to be almost, but not quite, different. In Type Scale, set the Base size (pixels) of your body text, such as 16, and choose a Ratio. 1.25: major third is a gentle step for a page of reading; 1.5: perfect fifth gives big contrast for a landing page. Choose Steps above the base (for headings) and Steps below (for small print), and look at the sample in each size. Set Narrowest screen (pixels) and Widest screen (pixels), with a Base size on the widest screen, to get sizes that grow smoothly with the screen instead of jumping. Copy the CSS custom properties into your stylesheet.

4. Add a gradient

A flat colour block behind a banner gets more depth from a gradient. In CSS Gradient, choose a Type (Linear, Radial or Conic), an Angle (degrees), and write the Colour stops one a line. Colours close to each other in lightness look natural; two very different colours can band or look garish. Check that your text still passes the contrast check at the lightest and darkest parts of the gradient. Copy gives the background line.

5. Lift a card with a shadow

In Box Shadow, keep Make a on box-shadow (or choose text-shadow). Several layers look more natural than one: Add a layer so that a tight, darker one sits under a wide, faint one. Raise Blur (pixels) more than Down (y, pixels), and keep Opacity (0 to 1) low. Set Page colour to the colour your page really has, so what you see is what you get: a shadow that looks good on white vanishes on dark grey.

6. Give an edge or an image a shape

For a banner or hero image whose bottom edge is cut at an angle, use Clip-path: choose a Start from a preset such as Chevron or Triangle, drag the points, and copy the polygon(). Anything outside the shape is hidden, along with clicks on it, and so is any shadow on the same element: put the shadow on a wrapper around it.

For a soft, organic shape behind a heading or an avatar, Blob Shape draws one from a Seed (any text). The same seed with the same settings always gives the same shape, so write down a seed you like. Randomness (0 to 100) sets how wobbly it is, Copy SVG gives it as an image and Copy CSS as a clip-path.

7. Make movement feel right

A menu that slides in at a constant speed feels mechanical. In Easing Curve, choose a Kind, start from a preset (ease-out is a good start for something arriving on screen, ease-in for something leaving), drag the curve and press Play to see a ball move along it. Keep the Duration of the preview short: around 0.2 to 0.4 seconds suits an interface. Copy the value for transition-timing-function.

People who feel unwell from motion can ask their system to reduce it, so wrap bigger movement in a prefers-reduced-motion rule in your CSS and give those users a plain change.