Utiliome

Glassmorphism CSS Oluşturucu

Modern buzlu cam UI efektleri oluşturun. Bulanıklık, saydamlık ve kenarlıkları ayarlayıp CSS'i projenize kopyalayın. %100 ücretsiz.

Glass Properties

10px
0.20
0.30

Glassmorphism

The trendy frosted glass effect for modern web design.

Drag me around!

İlgili Araçlar

İhtiyacınız olabilecek diğer araçlar

Renk Paleti Oluşturucu

UI projeleriniz için harika renk paletleri ve geçişleri oluşturun ve dışa aktarın.

CSS Gradient Oluşturucu

Görsel olarak harika CSS renk geçişleri oluşturun ve kodunu anında kopyalayın.

Renk Paleti Çıkarma

Bir görsel yükleyerek renk paletini anında çıkarın.

Baskın Renk Çıkarıcı

Bir görsel yükleyerek baskın renklerini anında çıkarın.

Favicon Oluşturucu

Web projeleriniz için kolayca standart ve yüksek çözünürlüklü favicon'lar oluşturun.

ICO Oluşturucu

Görselleri Windows simgeleri ve favicon'lar için ICO formatına dönüştürün.

%100 Gizli • Sıfır Sunucu Dosya Yüklemesi

Neden Ücretsiz Utiliome Glassmorphism CSS Oluşturucu Kullanmalısınız?

Kesin gizlilik, anında işlem ve sıfır engelleme için sıfırdan tasarlandı. Abonelik, ödeme duvarı veya üyelik gerekmez.

Görsel Test Alanı

Cam efektinizi anında önizlemek için canlı bir arka plan üzerinde bulanıklığı, opaklığı ve doygunluğu gerçek zamanlı ayarlayın.

Çapraz Tarayıcı CSS

Safari, Chrome ve Firefox uyumluluğunu sağlamak için webkit ön ekli backdrop-filter kodunu otomatik oluşturur.

Tailwind Uyumlu

Standart CSS sınıfları oluşturun veya görsel tasarımınızı anında Tailwind CSS yardımcı sınıflarına dönüştürün.

Sıfır Gecikme

%100 istemci tarafı çalışma sayesinde kaydırıcıları sürükleyin ve matematiksel CSS güncellemelerini sıfır gecikmeyle görün.

Utiliome ve Geleneksel Bulut Alternatifleri

Yerel WebAssembly motorumuzu eski bulut araçlarıyla karşılaştırın.

Özellik Utiliome (Yerel Tarayıcı) Eski Bulut Dönüştürücüler
Canlı Önizleme Gerçek zamanlı etkileşimli alan Statik kod oluşturucular
Kod Çıktısı Vanilla CSS & Tailwind Yardımcı Sınıfları Yalnızca CSS
Uyumluluk Otomatik -webkit-backdrop-filter ekler Manuel ön ek gerektirir
Maliyet Reklamsız ve Sonsuza Dek Ücretsiz Premium düzenler için ödeme duvarı

3 Kolay Adımda Glassmorphism CSS Oluşturucu Kullanımı

Yazılım kurulumu gerekmez. Her şey doğrudan web tarayıcınızın içinde çalışır.

1

Bulanıklığı Ayarlayın

Cam kartınızın arkasındaki arka plan öğelerinin ne kadar bulanıklaşacağını belirlemek için bulanıklık kaydırıcısını kullanın.

2

Opaklık ve Rengi Ayarlayın

Camınıza hafif koyu bir ton veya parlak beyaz buzlu bir görünüm vermek için arka plan rengi alfa kanalını değiştirin.

3

CSS'i Kopyalayın

Kullanıma hazır CSS kodunu doğrudan panonuza kopyalamak için dışa aktar düğmesine tıklayın.

Glassmorphism UI Trendi Nedir?

Hızlı Cevap: Glassmorphism, yoğun arka plan bulanıklığına (buzlu cam) sahip yarı saydam arka planlar, ince çok katmanlı gölgeler ve ince kenarlıklarla karakterize edilen modern bir arayüz tasarım trendidir. Dikey derinlik ve hiyerarşi hissi yaratır.

Ağırlıklı olarak macOS Big Sur, iOS ve Windows 11 Fluent Design ile ortaya çıkan Glassmorphism, modern ve premium web uygulamaları için fiili standart haline gelmiştir.

Temel felsefe "Z eksenine" dayanır. Tasarımcılar, üst katmanı yarı saydam yapıp altındaki canlı katmanları yoğun bir şekilde bulanıklaştırarak, sert gölgelere ihtiyaç duymadan görsel hiyerarşi oluştururlar. Bu, kullanıcıya aktif pencerenin "arkasında" ne olduğu hakkında bağlam sağlar.

backdrop-filter CSS Özelliği Nasıl Çalışır?

Hızlı Cevap: backdrop-filter CSS özelliği, bir öğenin hemen arkasındaki alana bulanıklaştırma veya renk kaydırma gibi grafik efektleri uygular. Öğenin kendisini bulanıklaştıran standart 'filter'ın aksine, backdrop-filter yalnızca öğenin saydam arka planından görünen kısmı etkiler.

Glassmorphism efektini elde etmek için geliştiriciler tamamen backdrop-filter CSS kuralına güvenirler. Bir öğeyi yarı saydam bir arka plan rengine (ör. background: rgba(255, 255, 255, 0.2);) ayarlayıp backdrop-filter: blur(10px); uyguladığınızda, tarayıcının oluşturma motoru hemen arkadaki pikselleri alır, matematiksel olarak bulanıklaştırır ve öğenizin içine çizer.

Bu işlem, kullanıcı sayfayı kaydırdıkça tarayıcının pikselleri sürekli yeniden hesaplamasını gerektirdiğinden donanım hızlandırmalı bir özelliktir. Utiliome oluşturucusu, bu donanım ölçümlerini anında hesaplayarak performans etkisini gerçek zamanlı önizlemenizi sağlar.

Tailwind CSS ile Glassmorphism Oluşturma

Hızlı Cevap: Tailwind CSS, cam efektleri için yerleşik yardımcılar sunar. Özel CSS yazmadan buzlu cam görünümünü anında oluşturmak için 'backdrop-blur-md', 'bg-white/30' ve ince bir 'border-white/20' kombinasyonunu kullanabilirsiniz.

Özel CSS yazmak öğrenmek için harika olsa da, modern geliştiriciler genellikle Tailwind gibi yardımcı odaklı çerçeveleri tercih eder.

Tailwind'de bir cam kart oluşturmak için üç temel katmana ihtiyacınız vardır:

  • Bulanıklık: Arka planı buzlandırmak için backdrop-blur-md veya backdrop-blur-lg kullanın.
  • Renk Tonu: Cama fiziksel bir varlık kazandırmak için bg-white/20 (açık tema) veya bg-slate-900/40 (koyu tema) kullanın.
  • Kenar: Gerçek cam kenarlarında ışığı yakalar. Bunu border border-white/20 kullanarak ince 1 piksellik bir kenarlıkla simüle edin.

Utiliome oluşturucusu, standart CSS veya mükemmel biçimlendirilmiş bir Tailwind sınıf dizesi elde etmeniz için bir geçiş seçeneği sunar.

Çapraz Tarayıcı Uyumluluğu (Safari Sorunları)

Hızlı Cevap: Safari, tarihsel olarak arka plan filtreleri için '-webkit-' ön ekini gerektirmiştir. Bu ön eki unutursanız, cam efektiniz iOS ve macOS cihazlarda tamamen başarısız olur ve düz saydam bir kutuya dönüşür.

Junior geliştiricilerin glassmorphism uygularken karşılaştığı en büyük tuzak Apple cihazlarını unutmaktır. Chrome ve Firefox standart backdrop-filter özelliğini yerel olarak desteklerken, Safari (özellikle eski iOS sürümleri) bu ön eki kesinlikle gerektirir.

Eğer -webkit-backdrop-filter: blur(10px); kodunu eklemezseniz, Apple kullanıcıları yalnızca saydam bir div görecek ve metniniz arka plan önünde tamamen okunmaz hale gelecektir.

Utiliome CSS oluşturucu, gerekli WebKit ön eklerini çıktınıza otomatik olarak ekleyerek tasarımınızın tüm işletim sistemlerinde aynı görünmesini sağlar.

Erişilebilirlik (a11y) ve Glassmorphism Metin Kontrastı

Hızlı Cevap: Glassmorphism, bulanık ve canlı bir arka plan üzerine yerleştirilen metinlerin WCAG kontrast oranlarını karşılayamaması nedeniyle sıkça erişilebilirlik sorunlarına yol açar. Metin renginizin camın ortalama tonuna karşı yeterince koyu (veya açık) olduğundan emin olmalısınız.

Glassmorphism trendine yönelik en yaygın eleştiri zayıf erişilebilirliktir. Renkli bir arka plan görseli cam kartın arkasında koyu maviden parlak sarıya kayarsa, beyaz metin aniden tamamen görünmez hale gelebilir.

Bunu düzeltmek için güçlü bir arka plan tonu (opaklık) uygulamalısınız. Örneğin beyaz metin kullanıyorsanız, cam arka plan renginizin rgba(0, 0, 0, 0.6) gibi olduğundan emin olun. Bu, arkadan hangi canlı görsel geçerse geçsin metnin yasal olarak gerekli 4.5:1 minimum kontrast oranını korumasını sağlar.

Bölgesel Gölgelerle Gerçekçi Aydınlatma Ekleme

Hızlı Cevap: Bir yüzeyde düz duran buzlu cam paneli cam gibi görünmez. Onu arka plan katmanından ayırmak için çok hafif, geniş bir gölge (ör. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) kullanarak yükseltmelisiniz.

İnsan beyni derinliği yorumlamak için ışık ipuçlarına ihtiyaç duyar. Sadece arka planı bulanıklaştırırsanız, UI 'düz' görünebilir.

Camın öne çıkmasını sağlamak için onu Z ekseninde yükseltmeniz gerekir. Utiliome oluşturucusu, hafif bir box-shadow ayarlamanıza olanak tanır. Gölge opaklığını oldukça düşük tutarak (%10 civarı) ancak bulanıklık yarıçapını yüksek tutarak (32px), camı altındaki canlı arka plandan güzelce ayıran yumuşak bir ortam gölgeleme efekti yaratırsınız.

Glassmorphism CSS Oluşturucu SSS ve Teknik Rehber

Utiliome'un ücretsiz çevrimiçi ücretsiz online glassmorphism oluşturucu aracı hakkında bilmeniz gereken her şey.

Cam efektim Safari'de neden çalışmıyor?

Safari '-webkit-backdrop-filter' ön ekini gerektirir. Utiliome, tarayıcı uyumluluğu için bu ön eki CSS dışa aktarımında otomatik olarak oluşturur.

Tailwind CSS ile Glassmorphism kullanabilir miyim?

Evet. Utiliome oluşturucusu, tasarımınızı Tailwind yardımcı sınıflarına (ör. backdrop-blur-md bg-white/30) dönüştüren bir anahtar içerir.

backdrop-filter web sitesini yavaşlatır mı?

Evet, büyük öğelerde aşırı yüksek bulanıklık kullanımı, kaydırma sırasında GPU'yu pikselleri sürekli hesaplamaya zorladığından düşük donanımlı mobil cihazlarda gecikmeye neden olabilir.

Cam kenarlarının gerçekçi görünmesini nasıl sağlarım?

Gerçek cam kenarlarında ışığı yansıtır. Bu kenar yansımasını simüle etmek için çok düşük opaklığa sahip (rgba(255, 255, 255, 0.2) gibi) 1px düz bir kenarlık ekleyin.

Bu CSS oluşturucu tamamen ücretsiz mi?

Evet, hiçbir sınır, reklam veya hesap kaydı olmadan %100 ücretsizdir.