Free CSS Box Shadow Generator + Glassmorphism & Neumorphism

Make a shadow, a frosted-glass panel or a soft-UI button with sliders, then copy the CSS or Tailwind code.

  • 100% free
  • 3 effects in one tool
  • Live preview
  • CSS & Tailwind
1
Pick an effectThen start from a preset.
Presets
2
Adjust itMove the sliders.
3
Preview & copyPick a format and copy.
HelloThis is your element

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Make a CSS shadow or glass effect in three steps

  1. Choose an effectPick Glassmorphism, Neumorphism or Box shadow, then start from a preset.
  2. Adjust with slidersChange blur, transparency, distance, color and more. The preview updates as you move.
  3. Copy the codeCopy plain CSS or a Tailwind class and paste it into your project.
Why this one

Shadows, glass and soft UI in one place

Three tools in one

Glassmorphism, neumorphism and box shadows, switch between them in one click.

Presets to start from

Pick a look, then fine-tune it with sliders.

Copy-ready code

CSS with the -webkit prefix where needed, or a Tailwind class.

See the real thing

A live preview on a colorful backdrop, so the blur is visible.

Tips

Tips for better results

  • Put glass on something colorful. A gradient or photo behind the panel makes the blur visible.
  • Keep glass text readable. Use dark text on light glass or white text on dark glass, and check the contrast.
  • Stack shadows for realism. Two or three soft layers look better than one heavy shadow.
  • Use neumorphism sparingly. It works well for a few controls like switches and cards, not for a whole page.
FAQ

Box shadow, glassmorphism and neumorphism questions

What is glassmorphism?

Glassmorphism is a frosted-glass look: a semi-transparent panel that blurs whatever is behind it, usually with a thin light border. In CSS it uses background with transparency and backdrop-filter: blur().

What is neumorphism?

Neumorphism (soft UI) makes elements look gently pushed out of, or pressed into, the page. It uses two shadows, one light and one dark, on a background of the same color.

How do I make a CSS box shadow?

Use box-shadow: x y blur spread color. For example box-shadow: 0 10px 30px rgba(0,0,0,0.2); gives a soft shadow below the box. You can stack several shadows, separated by commas, for a more natural look.

Does backdrop-filter work in all browsers?

It works in all current browsers. Keep the -webkit-backdrop-filter line the tool gives you, for older Safari versions.

Why doesn't my glass effect show a blur?

The blur only shows when there is something colorful or detailed behind the panel, such as an image or a gradient. On a plain background there is nothing to blur.

Is neumorphism accessible?

It can be hard to read, because the edges have low contrast. Use it for decoration, keep text contrast high and add a clear focus style on buttons.

How do I use the result in Tailwind CSS?

Open the Tailwind tab and copy the classes. They use arbitrary values, so they work without changing your config.

Is anything uploaded?

No. Everything runs in your browser.

Read the guideGlassmorphism, Neumorphism and Box Shadow in CSSA practical guide with copy-ready code and accessibility tips.Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.