CSS effects generator
Visually design CSS box-shadow, border-radius, glassmorphism and neumorphism effects with a live preview, then copy the generated CSS. Fully offline.
Open CSS effects generator →What is the CSS effects generator?
A visual designer for four common CSS effects — box-shadow, border-radius, glassmorphism and neumorphism. Drag the sliders, watch a live preview update, then copy the generated CSS straight into your stylesheet. It runs entirely in your browser and works offline.
How to use CSS effects generator
- Pick an effect — Choose a tab: Box shadow, Border radius, Glassmorphism or Neumorphism. Each has its own controls and preview.
- Tune the look — Drag the sliders — offset, blur, spread, opacity, radius and so on — and pick colours. The preview box updates live as you adjust.
- Refine the details — Use the extra options for each effect, such as Inset for shadows, linked corners for radius, or the shape choices for neumorphism.
- Copy the CSS — Click Copy CSS to grab the generated rule, then paste it into your stylesheet.
Frequently asked questions
Which effects can I generate?
Four: box-shadow, border-radius, glassmorphism (with backdrop blur and a tint) and neumorphism (soft inset and outset shadows).
Is the generated CSS ready to paste?
Yes. Each tab outputs a complete CSS snippet you can copy and drop straight into your stylesheet or a component's styles.
Does it remember my settings?
Yes. Your slider values and colours are saved locally on your device, so the tool reopens where you left off.
What is the difference between glassmorphism and neumorphism?
Glassmorphism uses a frosted, semi-transparent surface with a backdrop blur over a colourful background. Neumorphism uses soft light and dark shadows on a single background colour to make shapes look pressed in or raised out.
Does it work offline?
Yes. Everything runs in your browser with no dependencies, so it keeps working offline after the first load.
Tips
- For glassmorphism, test your CSS over a real colourful background — the frosted effect only shows when there's something behind it.
- Keep box-shadow opacity subtle for UI cards; heavy shadows can look dated.
- Link all corners on the radius tab for an even rounded shape, or unlink them for asymmetric designs.