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

🎨

CSS Kart Oluşturucu

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

Cam efekt parametrelerini ayarlayın

Bul'anıklaştırma, opaklık ve doygunluğu ayarlayarak dondurulmuş cam görünümünü kontrol edin.

Kenarlıkları ve gölgeleri özelleştirin

Kenarlık genişliği, opaklık, yarıçap ve gölge derinliğini ince ayarlayın.

CSS'yi kopyalayın

Kartı gradyan arka plan üzerinde önizleyin ve CSS kodunu kopyalayın.

Loading tool...

What Is CSS Kart Oluşturucu?

CSS Kart Oluşturucu, ayarlanabilir bulanıklaşma, saydamlık ve gölge efektleri ile glassmorfik kart tasarımları oluşturur. Glassmorphism, arka plan bulanıklığı ve yarı saydam katmanları kullanarak dondurma camı etkisini yaratmak için kullanılan popüler bir UI tasarım trendidir. Bu araç, ana parametreler üzerinde precisa kontrol sağlar: arka plan bulanık miktarı, arka plan opasitesi, kenarlık saydamlığı, kenar yarıçapı ve kutu gölgesi. Ön izleme, kartınızı renkli gradyan bir arka plan üzerinde görüntüler, böylece içerik arkadan gösterildiğinde dondurma camı efektinin tam olarak nasıl göründüğünü görebilirsiniz. Oluşturulan CSS, webkit ön ekleri de dahil olmak üzere necessary tüm özellikler içerir. Kartlar temel UI bileşenlerdir ve bu araç size modern, görsel olarak çarpıcı kart tasarımları oluşturmanıza yardımcı olur.

Why Use CSS Kart Oluşturucu?

Dondurulmuş cam kart efektleri için tam glassmorphism kontrolleri
Şeffaflığı görmek için gradyan arka plan üzerinde önizleme yapın
Maksimum tarayıcı uyumluluğu için webkit ön ekleri içerir
Gölge, kenarlık ve dolgu için ayarlanabilir tam özelleştirme

Common Use Cases

Gösterge Paneli.Widget'ları

Modern ve elegan görünümde cam efektli gösterge paneli kartları oluşturun.

Özellik Kartları

Cam stilleri ile landing sayfaları için özellik tanıtım kartları tasarlayın.

Üst Üste İçerik

Görüntüler üzerinde görünen içerikler için dondurulmuş cam üst üste birleştirme oluşturun.

Profil Kartları

Kullanıcı profil kartlarını çağdaş bir cam estetiği ile tasarlayın.

Technical Guide

Glassmorphism, bir öğenin arkasındaki alana grafik efektleri uygulayan backdrop-filter CSS özelliğine dayanır. Ana işlev, blur(), dondurma camı görünümünü oluşturan fonksiyondur. Yarı saydam bir arka plan (rgba veya hsla kullanarak) ile kombinlendiğinde, etki arkadaki içeriğin görünebilmesini ancak bulanıklaşmasını sağlar. Kenarlık, tanımlama için arka plandan biraz daha yüksek opasite kullanır. Safari desteği için -webkit-backdrop-filter ön eki gereklidir. Etki çalışması için öğenin şeffaf veya yarı saydam bir arka planı olmalı ve arkasında bulanıklaştırılacak içerik bulunmalıdır. Performans dikkate alınması: backdrop-filter, büyük öğeler üzerinde veya birçok bulanık öğe çakıştığında pahalı olabilir. will-change: backdrop-filter kullanarak tarayıcıya animasyonlu özelliği hakkında ipucu verin. Geri dönüş için, backdrop-filter'i desteklemeyen tarayıcılar için yarı saydam bir arka plan sağlayın.

Tips & Best Practices

1
En iyi cam efektini elde etmek için arka plan opaklığını düşük tutun (15-25%)
2
Görünen bulanıklık için kartın arkasına renkli veya resim arka planı kullanın
3
Arka plana göre daha yüksek opaklıkta ince bir kenarlık ekleyin
4
Ekstra derinlik ve ayrım için box-shadow ile birleştirin

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 Kenar Yuvarlaklık Oluşturucu

Her köşe için ayrı kontrol ve görsel önizleme ile CSS kenar yuvarlaklık değerleri oluşturun.

🎨 CSS & Design

Cam Etkisi Oluşturucu

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

🎨 CSS & Design

Neumorfizm Jeneratörü

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

🎨 CSS & Design

Frequently Asked Questions

Q Glassmorphism tüm tarayıcılarda çalışır mı?

backdrop-filter, tüm modern tarayıcılar tarafından desteklenmektedir. Safari, -webkit- ön ekinin kullanılmasını gerektirmektedir ve bu araç bunu içerir.

Q Neden cam efektim görünmüyor?

Öğenin yarı şeffaf bir arka plana ve arkasındaki içeriğe ihtiyacı vardır. Kartı resim veya gradyanın üzerine yerleştirin.

Q Glassmorphism erişilebilir mi?

Metin ve bulanık arka plan arasında yeterli kontrastı sağlayın. Okunabilirliğin kritik olduğu yerlerde cam efektleri kullanmaktan kaçının.

Q Bulanıklık etkisini animasyonlayabilir miyim?

Evet, ancak backdrop-filter'ı animasyonlamak performans açısından yoğundur. Opaklık geçişlerini kullanmayı düşünün.

Q İyi bir bulanıklık değeri nedir?

10-20px, arka plan içeriğini tamamen gizlemeden belirgin bir dondurulmuş efekt sağlar.

About This Tool

CSS Kart 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.