Skip to content

CSS Generator

Visually build box-shadow, border-radius and glassmorphism CSS with a live preview, then copy the code.

About CSS Generator

This CSS generator lets you create box-shadow, border-radius and glassmorphism effects visually. Move the sliders for offset, blur, spread, colour and corner radius and the live preview updates instantly, then copy the generated CSS straight into your stylesheet.

Each corner radius can be set separately, and the glass tab produces a frosted-glass effect with backdrop blur and transparency. It saves front-end developers, designers and students from guessing values by trial and error. The generator is free, needs no sign-up and runs in your browser. Every change shows up in the preview straight away, so you can fine-tune the look before copying.

How to use CSS Generator

  1. Pick a tab: Box shadow, Border radius or Glass.
  2. Move the sliders and watch the preview.
  3. Copy the generated CSS into your stylesheet.

Frequently asked questions

Does backdrop-filter work everywhere?

Yes in all current browsers. Safari needs the -webkit-backdrop-filter prefix, which the generated code includes.

What does spread do in box-shadow?

Spread grows (positive) or shrinks (negative) the shadow before blurring. Negative spread with a larger blur gives soft, realistic shadows.

Can I set each corner separately?

Yes — turn off “Same for all corners” in the Border radius tab.

How do I add a box shadow in CSS?

Use box-shadow: x-offset y-offset blur spread colour, for example box-shadow: 0 4px 12px rgba(0,0,0,0.15). Adjust the sliders and copy the line.

What is glassmorphism?

It is a design style that looks like frosted glass, made with a semi-transparent background and backdrop-filter: blur().

How do I make a circle with border-radius?

Give a square element border-radius: 50%.

People also search for

css generator · css generator online · css generator tool · css generator free · box shadow generator · box shadow generator online · box shadow generator css · css shadow generator online · border radius css · glassmorphism · glassmorphism effect online · css maker online

Related tools