Cam Etkisi Oluşturucu Arka plan bulanıklığı, saydamlık ve doygunluk kontrolleri ile donuk cam UI efektleri oluşturun.

🎨

Cam Etkisi Oluşturucu

Arka plan bulanıklığı, saydamlık ve doygunluk kontrolleri ile donuk cam UI efektleri oluşturun.

Cam parametrelerini ayarlayın

Bulunma yoğunluğu, saydamlık, doygunluk, kenar saydamlığı ve gölgeyi kontrol edin.

Renkli gradyan üzerinde önizleme yapın

Cam efektini renkli bir gradyan arka plan üzerinde görün.

CSS'yi kopyalayın

Tamamlanmış cam morfoloji CSS'sini webkit ön ekleri ile birlikte kopyalayın.

Loading tool...

What Is Cam Etkisi Oluşturucu?

Glassmorphism Generator, CSS arka plan filtresi kullanarak popüler dondurulmuş cam UI efektini oluşturur. Glassmorphism, yarı saydam arka planlar ve arka plan bulanıklığı ile karakterize edilen bir tasarım trendidir ve bu, dondurulmuş cam benzeri bir etki yaratır. Ana görsel öğeler: arkasındaki içeriği gösteren yarı saydam bir arka plan, tanımlama için ince bir sınır ve genellikle derinlik için hafif bir gölge içerir. Bu araç, bulanıklık yoğunluğu, arka plan opaklığı, doygunluk (camdan görünen renkleri geliştiren), sınır opaklığı, sınır yarıçapı ve gölge opaklığı gibi tüm parametreler üzerinde ince ayarlı kontrol sağlar. Ön izleme, cam öğesini canlı bir gradyan üzerine gösterir, böylece bulanıklık ve saydamlık efektlerini net olarak görebilirsiniz. Oluşturulan CSS, Safari uyumluluğu için webkit ön ekleri içerir.

Why Use Cam Etkisi Oluşturucu?

Bulunma, saydamlık, doygunluk ve kenar için ince ayar kontrolleri
Gradyan arka plan üzerinde önizleme yapın ve cam efektini görselleştirin
Safari uyumluluğu için -webkit-backdrop-filter içerir
Ayarlabilir gölge ve kenar yarıçapı ile tam özelleştirme

Common Use Cases

Modern UI Kartları

Modern web arayüzleri için çağdaş cam efektli kartlar oluşturun.

Navigasyon Çubukları

Arkalarındaki sayfa içeriğini bulanıklaştıran dondurulmuş cam navigasyon çubukları oluşturun.

Modal Arka Planlar

Eşsiz ve şeffaf diyaloglar için modal örtülerde cam efektini uygulayın.

Yan Panel Çubukları

Renkli arka planlara uyumlu yarı saydam yan panel çubukları tasarlayın.

Technical Guide

Glassmorphism, özellikle blur() ve saturate() işlevleriyle backdrop-filter CSS özelliğine dayanır. backdrop-filter, filter'ın öğeyi kendisi etkilediği aksine, bir öğenin arkasındaki alana efektler uygular. Bulanıklık görünür olması için öğenin yarı saydam bir arka plana (rgba veya hsla kullanarak) sahip olması gerekir. Piksel cinsinden blur() değeri, dondurulmuş effectin yoğunluğunu kontrol eder - 10-20px tipiktir. %100'den fazla doygunluk, camdan görünen renkleri geliştirir. Sınır, tanımlama için arka plan renginin biraz daha yüksek opaklık versiyonunu kullanır. box-shadow derinlik ekler. Safari için -webkit-backdrop-filter ön eki gereklidir. Geri dönüşüm için, backdrop-filter'i desteklemeyen tarayıcılar için daha opak bir arka plan sağlayın. Özellik algılaması için @supports (backdrop-filter: blur(1px)) kullanın. Performans notu: backdrop-filter büyük öğeler üzerinde veya birden fazla bulanık katman yığınında pahalı olabilir.

Tips & Best Practices

1
Açık bir dondurulmuş efekt için 10-20px bulanıklık kullanın
2
En iyi cam görünümü için arka plan saydamlığını %15-30 arasında tutun
3
Cam aracılığıyla renkleri artırmak için doygunluğu %150'nin üzerine çıkarın
4
En büyük etkiye sahip olmak için renkli veya resim arka planları üzerinde kullanın

Related Tools

CSS Kutu Gölgesi Oluşturucu

Birden çok katman, iç gömme seçenekleri ve gerçek zamanlı ön izleme ile CSS kutu gölgeleri oluşturun.

🎨 CSS & Design

CSS Kart Oluşturucu

Arka plan bulanıklığı, saydamlık ve gölge kontrolleri ile cam gibi kart tasarımları oluşturun.

🎨 CSS & Design

Neumorfizm Jeneratörü

Işık ve koyu gölge çiftleriyle neomorifik (yumuşak UI) tasarımlar oluşturun.

🎨 CSS & Design

Kil Morfoloji Jeneratörü

Yuvarlak köşeler, iç gölgeler ve yumuşak vurgular ile kil benzeri 3D UI efektleri oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Cam morfoloji tüm tarayıcılarda destekleniyor mu?

backdrop-filter tüm modern tarayıcılarda çalışır. Safari, bu aracı dahil ettiği -webkit- ön ekini gerektirir.

Q Neden cam efektini göremiyorum?

Öğenin yarı saydam bir arka plana ve arkasındaki içeriğe ihtiyacı vardır. Bir gradyan, resim veya diğer içerikler üzerinde yerleştirin.

Q Cam morfoloji erişilebilir mi?

Bulanık arka plan üzerindeki metin kontrastını yeterli düzeyde tutun. Metin okunurluğunun kritik olduğu yerlerde kullanmaktan kaçının.

Q Performans etkisi nedir?

backdrop-filter özellikle yüksek bulanıklık değerleri veya yığılmış birden fazla öğe ile birlikte pahalı olabilir. Az kullanımlarda tercih edin.

Q Cam morfolojisini animasyonlaştırabilir miyim?

Saydamlık ve arka plan rengini animasyonlaştırabilirsiniz, ancak bulanıklık değerlerini animasyonlaştırmak performans açısından yoğundur.

About This Tool

Cam Etkisi Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.