🪟 CSS Glassmorphism Generator

Generate CSS glassmorphism effects visually. Adjust blur, transparency, border, and background. Copy ready-to-use CSS. Free glassmorphism generator for modern UI design.

Tint Color

Blur: 12px

BG Opacity: 15%

Border Opacity: 30%

Border Radius: 16px

Saturation: 180%

Glass Card

Glassmorphism effect preview

Generated CSS

How to Use

Adjust the controls

Use the sliders to set blur, background opacity, border opacity, radius, and saturation. Pick a tint color with the color swatch.

See the live preview

The glass card updates instantly. Experiment with values to achieve the look you want.

Copy the CSS

Click Copy CSS to copy the generated code to your clipboard. Paste it into your stylesheet.

Frequently Asked Questions

What is glassmorphism? +

Glassmorphism is a UI design trend that mimics frosted glass — featuring blur, transparency, subtle borders, and shadows to create a layered depth effect. It became popular with iOS and macOS Big Sur designs.

What CSS properties create a glass effect? +

The key property is backdrop-filter: blur() which blurs the content behind the element. Combined with a semi-transparent background (rgba with low alpha), a thin border (rgba white), and box-shadow, you get the glassmorphism look.

Does backdrop-filter work in all browsers? +

backdrop-filter is supported in Chrome, Edge, Safari, and Firefox (since version 103). Add -webkit-backdrop-filter for Safari compatibility. Internet Explorer does not support it.

How do I add a glassmorphism card to my website? +

Copy the generated CSS and apply it to your element. Make sure the element has colorful content behind it — glassmorphism requires visible background content for the blur effect to look good.

What is the best blur value for glassmorphism? +

A blur of 10–16px is typically the sweet spot. Too little (under 5px) and the effect is barely visible. Too much (over 24px) and the background is unrecognizable. Pair with 15–25% opacity for best results.

Tam Rehber: CSS Glassmorphism Üreticisi

Glassmorphism, donmuş camı taklit eden bir UI tasarım stilidir: arka plan içeriğinin bulanık şekilde göründüğü yarı saydam yüzeyler, derinlik ve katmanlama hissi yaratır. Apple'ın 2020'deki macOS Big Sur tasarımıyla geniş kitlelere tanınan bu estetik, modern UI'nin en tanınan görsellerinden biri haline gelmiştir.

Glassmorphism'in Arkasındaki 4 CSS Özelliği

.cam-kart {
  /* 1. Yarı saydam arka plan */
  background: rgba(255, 255, 255, 0.15);

  /* 2. Bulanıklık — tanımlayıcı özellik */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */

  /* 3. Narin donmuş kenar */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* 4. Derinlik gölgesi */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  border-radius: 16px;
}

backdrop-filter: blur() Nasıl Çalışır?

backdrop-filter, filtreyi öğenin arkasındaki alana uygular. Bu, öğenin kendisini bulanıklaştıran filter: blur()'dan temel olarak farklıdır. Bulanıklık yarıçapı donmuş cam yoğunluğunu belirler:

4–8px: hafif donmuşluk, arka plan hâlâ okunabilir
10–16px: standart glassmorphism görünümü
20px+: yoğun don, arka plan neredeyse tanınmaz

Tarayıcı Desteği ve Safari Ön Eki

Her zaman her iki bildirimi birlikte kullanın:

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

Safari, 2026 itibarıyla hâlâ -webkit- ön ekini gerektirmektedir. Destek vermeyen tarayıcılar için zarif bir geri dönüş sağlayın: daha opak bir arka plan rengi kullanın.

Performans Etkisi: GPU Kompozitleme

backdrop-filter pahalı bir işlemdir. Tarayıcıyı arka planı ekran dışı arabelleğe almaya ve GPU bulanıklık gölgeleyicisi uygulamaya zorlar. Dikkat edilmesi gerekenler:

Sayfa başına backdrop-filter sayısını sınırlayın (1–3 tipik olarak sorunsuz, 10+ mobilde kare düşüşüne neden olur)
Bulanıklık yarıçapını canlandırmaktan kaçının
Cam kartların yanında hareket edecek öğelerde will-change: transform kullanın

Glassmorphism Ne Zaman Kullanılmamalı?

Metin ağırlıklı arka planlar üzerinde: bulanık içerik karttaki metni okumayı zorlaştırabilir
Düz renkli arka planlarda: bulanıklaştırılacak karmaşıklık olmadığında efekt anlamsız görünür
Kritik UI öğelerinde: navigasyon menüleri ve form girişleri netliği estetikten önde tutmalıdır
Erişilebilirlik: yeterli kontrast oranını sağlayın (WCAG AA minimum: 4.5:1)

Glassmorphism'i özel gölgelerle birleştirmek için Box Shadow Generator aracımızı, dinamik renkli arka planlar için Gradient Generator aracımızı kullanın.