CSS Generator

Build gradients, box shadows, background patterns and rounded borders with a live preview, then copy the CSS.

✨ Features

  • Linear, radial and conic gradients with an angle and as many colour stops as you need
  • Stack box-shadow layers, each with its own offset, blur, spread, colour, opacity and inset
  • Stripe, dot and checker backgrounds made from pure CSS – no image requests
  • Per-corner border-radius plus border width, style and colour, all with a large live preview and one-click copy

🪄 Use cases

Instead of a hero image

Give a header a background with a gradient alone – nothing extra to download.

Dialling in card shadows

Nudge blur and spread until the card lifts off the page without floating away.

Subtle background texture

Lay down stripes or dots in CSS and keep the request count flat.

Sharing a look

Send the URL and the same settings open on the other side, ready to tweak.

🔒 Privacy

CSS is generated and previewed entirely in your browser and never sent to a server. Only when you shorten a share URL is that URL (including the settings) sent to the shortening service.

❓ FAQ

Can I paste the generated CSS as is?

Yes. Copy the background, box-shadow and other declarations onto your element. No vendor prefixes are emitted: linear-gradient, radial-gradient and box-shadow have been stable in every major browser for years, while conic-gradient is a more recent addition.

Can colour stop positions be omitted?

CSS allows it and spaces the stops evenly when you do. This tool always writes the percentage so the intent is explicit; delete the numbers after pasting if you would rather rely on the default spacing.

How many box-shadow layers can I stack?

CSS has no limit – shadows are just a comma-separated list. This tool caps it at five to keep the controls manageable. Natural-looking depth usually comes from two or three layers: a small dark one close to the element and a large soft one behind it.

Do the patterns use images?

No. Stripes come from repeating-linear-gradient, dots from radial-gradient plus background-size, and the checkerboard from conic-gradient. Nothing extra is downloaded, nothing blurs when scaled, and the colours stay editable in code.

🔗 Related tools

Gradient

Type
deg

Colour stops

Presets

Preview

Generated CSS