Box Shadow çok katmanlı gölge nasıl oluşturulur?

Çok katmanlı gölgeler, tek bir 'box-shadow' kuralına virgülle ayrılarak birden fazla gölge tanımı eklenerek oluşturulur. Bu yöntem düz ve sert gölgeler yerine gerçek hayattaki gibi yumuşak, gerçekçi ve derinlikli (elevation) bir kart görünümü kazandırır.

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

Glassmorphism efekti CSS 'backdrop-filter: blur()' özelliği ile çalışır. Safari ve iOS tarayıcıları için '-webkit-backdrop-filter' ön eki gereklidir. Aracımız ürettiği kodda bu ön eki otomatik olarak ekler, böylece tüm modern masaüstü ve mobil tarayıcılarda sorunsuz çalışır.

Linear ve Radial Gradient arasındaki fark nedir?

Linear Gradient, renk geçişini düz bir çizgi ve açı doğrultusunda (örn. 135 derecelik çapraz açıyla) yapar. Radial Gradient ise renk geçişini kartın merkezinden veya belirlenen bir noktadan dairesel olarak dışa doğru yayar.

Üretilen CSS kodunu projeme nasıl ekleyebilirim?

'CSS Kodunu Kopyala' butonuna tıklayarak kodu panoya kopyalayın. Ardından projenizdeki CSS dosyasında ilgili sınıf (class) veya ID etiketinin içerisine doğrudan yapıştırabilirsiniz.

Canlı Görsel CSS Stüdyosu

CSS Box Shadow, Glassmorphism & Gradient

Modern arayüzleriniz için katmanlı kutu gölgeleri (Box Shadow), Apple tarzı buzlu cam efekti (Glassmorphism) ve kusursuz renk geçişleri (Gradient) tasarlayın, canlı önizleyin ve kodunu kopyalayın.

Hazır Gölgeler (Presetler)

Gölge Katmanları

Yatay Kaydırma (X Ofset) 0px

Dikey Kaydırma (Y Ofset) 14px

Bulanıklık Yarıçapı (Blur) 30px

Yayılma Yarıçapı (Spread) -4px

Gölge Rengi & Opaklık %15

İç Gölge Olarak Uygula (Inset)

inovoice

CSS Stüdyosu

Oluşturulan CSS Kodu

/* CSS Kodu burada oluşturulacaktır */

Rehber

CSS Kod Üretici Nasıl Kullanılır?

Görsel Efekti Seçin

Kutu gölgesi (Box Shadow), modern buzlu cam (Glassmorphism) veya renk geçişi (Gradient) sekmelerinden birini seçin.

Parametreleri Ayarlayın

Bulanıklık, ofset, renk, yayılma ve opaklık sürgülerini kullanarak efektinizi canlı önizleme sahnesinde anında görün.

1-Tıkla Kopyalayın

Tarayıcı ön ekleriyle (prefix) birlikte optimize edilmiş temiz CSS kodunu kopyalayıp web projenize hemen ekleyin.

SSS

Sıkça Sorulan Sorular

Tek bir gölge yerine aralarına virgül koyarak 2 veya 3 katmanlı gölge tanımlamak (biri yakındaki keskin gölge, diğeri uzaktaki yaygın yumuşak gölge) arayüz kartlarınıza Figma ve Tailwind standartlarında gerçekçi bir 3D derinlik kazandırır.

Evet. Glassmorphism için gerekli olan backdrop-filter: blur() özelliği, Safari ve iOS WebKit tarayıcıları için -webkit-backdrop-filter: blur() ön ekiyle birlikte sunulmalıdır. Aracımız ürettiği kodda bu kuralı otomatik sağlar.

Linear gradient, renkleri belirli bir açı doğrultusunda (örneğin 135 derecelik çapraz açıyla) düz bir eksende harmanlar. Radial gradient ise renkleri kartın merkez noktasından dairesel veya eliptik dalgalar halinde dışarıya doğru yayar.

Kesinlikle. Oluşturulan CSS kurallarını saf CSS dosyalarınıza, SCSS mixin'lerine veya Tailwind CSS konfigürasyonunuzdaki (tailwind.config.js) boxShadow ya da backgroundImage alanlarına birebir ekleyebilirsiniz.

Kusursuz UI/UX & Web Tasarım

Markanız İçin Ödüllü Tasarım &
Özel Arayüz Mühendisliği

Sıradan temalardan ve hazır şablonlardan sıkıldınız mı? inovoice tasarım ekibi, markanız için Figma'dan piksel kusursuzluğunda, yüksek dönüşüm odaklı kurumsal web arayüzleri inşa eder.

Web Tasarım Hizmetimiz Arayüz Teklifi Alın

Dijital Dönüşümünüzü ve Büyümenizi
Bugün Başlatın.