Glassmorphism / Neumorphism Generator

Create modern UI effects with live preview

Style Type

Presets

Blur: 10px

Transparency: 40%

Border Radius: 16px

Border Width: 1px

Background Color

Border Color

Text Color

Shadow

X: 0px

Y: 8px

Blur: 32px

Spread: 0px

Opacity: 10%

Shadow Color

Preview Background

Custom Background Color

Glass Card

This is a preview of your glassmorphism effect. Adjust the controls to customize the appearance.

CSS Code

.glass-element {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

Tailwind CSS

backdrop-blur-md bg-white/[0.40] rounded-xl border border-white/[0.50] shadow-xl

<!-- Note: For exact control, use custom CSS or Tailwind's arbitrary values -->
<!-- Example with arbitrary values: -->
backdrop-blur-[10px] bg-[#ffffff]/[0.40] rounded-[16px] border-[1px]