CSS Kutu Gölge Oluşturucu

Settings

X Offset (px)

4px

Y Offset (px)

8px

Blur (px)

16px

Spread (px)

0px

Shadow Color

15%

Inset Inset shadow

Presets

Preview

Preview Box

CSS Code

box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.15);

Geliştiricilerin ve tasarımcıların, parametreleri gerçek zamanlı olarak ayarlayarak CSS kutu gölgesi efektlerini görsel olarak oluşturmalarına, ardından oluşturulan kodu doğrudan projelerine kopyalamalarına olanak tanır - manuel hesaplamaya gerek yoktur.

CSS Kutu Gölgesi Oluşturucuyu Nasıl Kullanılır

Aracın arayüzünün adım adım açıklaması:

X ve Y Ofsetini Ayarlayın — Gölgeyi öğeye göre konumlandırmak için yatay ve dikey ofset kaydırıcılarını sürükleyin. Pozitif X gölgeyi sağa hareket ettirir; negatif sola hareket ettirir. Pozitif Y aşağı hareket ettirir; negatif yukarı hareket ettirir.
Bulanıklık Yarıçapını Ayarlayın — Daha yüksek bulanıklık değerleri daha yumuşak, daha yayılmış gölgeler üretir. 0 bulanıklık keskin, sert kenarlı bir gölge verir.
Yayılma Yarıçapını Kontrol Edin — Yayılma, gölgeyi öğenin boyutlarının ötesine genişletir veya daraltır. Pozitif değerler gölgeyi büyütür; negatif değerler küçültür.
Gölge Rengini ve Opaklığını Seçin — Renk seçici ile herhangi bir renk seçin ve şeffaflığı kontrol etmek için opaklık kaydırıcısını kullanın. Yarı saydam gölgeler (örn. düşük alfa değerine sahip rgba) çoğu arka planda daha doğal görünür.
İç Gölgeyi Aç/Kapat — Basılmış veya kabartmalı bir efekt oluşturmak için gölgeyi öğenin içine çevirmek için "İç" seçeneğini işaretleyin.
Bir Ön Ayar Uygulayın — Anında klasik gölge stilleri için hazır ön ayarlardan herhangi birine tıklayın.
CSS Kodunu Kopyalayın — Oluşturulan box-shadow bildirimini panonuza kopyalamak için "Kopyala" düğmesine basın.

CSS box-shadow Özelliğini Anlamak

Tam sözdizimini kapsayan teknik bir açıklama:

box-shadow: [inset] offset-x offset-y [blur] [spread] color;

Parametreler açıklandı:

offset-x — Gölgenin öğeden yatay uzaklığı.
offset-y — Gölgenin öğeden dikey uzaklığı.
blur-radius — Gölge kenarlarının yumuşaklığı. Sıfır keskin demektir.
spread-radius — Gölgenin ne kadar genişleyeceğini veya küçüleceğini kontrol eder.
color — Herhangi bir geçerli CSS rengi (HEX, RGB, RGBA, HSL). RGBA, tek bir değerde opaklık kontrolüne izin verdiği için önerilir.
inset — Gölge yönünü tersine çeviren, onu öğenin kenarlığının içine yerleştiren isteğe bağlı anahtar kelime.

Kutu Gölgesi Hazır Ayarları — Her Stil Ne Zaman Kullanılmalı?

6 yerleşik hazır ayarın her birinin açıklaması ve kullanım durumu:

Hazır Ayar	Stil	En İyisi İçin
Hafif kaldırma	0 1px 3px, %10 opaklık	Küçük kullanıcı arayüzü öğeleri, etiketler, çipler
Hafif kart gölgesi	0 4px 6px, %10 opaklık	Kart bileşenleri, modallar
Orta derinlik	0 10px 25px, %15 opaklık	Hero bölümleri, özellik kartları
Derin yükseltme	0 20px 40px, %20 opaklık	Açılır menüler, yüzen paneller
Sert renk gölgesi	4px 4px 0px mavi	Retro/brutalist kullanıcı arayüzü stili
İç parlama	Inset 0 0 20px koyu mavi	Aktif girişler, odaklanmış durumlar

Dış Gölge ve İç Gölge — Fark Nedir?

Standart (dış) kutu gölgesi ile iç gölge arasındaki görsel ve işlevsel farkı açıklayın:

Dış gölge, bir öğenin sayfa yüzeyinin üzerinde yükseldiği yanılsamasını yaratır — kartlar, düğmeler ve kapsayıcılar için idealdir.
İç gölge, bir öğenin sayfaya batık veya basılmış gibi görünmesini sağlar — genellikle aktif düğme durumları, metin giriş alanları ve kuyular için kullanılır.

Doğal Görünümlü CSS Kutu Gölgeleri İçin İpuçları

Pratik tasarım tavsiyeleri:

Tamamen opak renkler yerine düşük opaklığa (%0.10–0.20) sahip RGBA renkleri kullanın.
Gölge yönünü bir sayfa boyunca tutarlı bir şekilde eşleştirin (genellikle aşağı doğru ve hafifçe sağa, sol üst ışık kaynağını simüle ederek).
Daha gerçekçi derinlik için birden fazla gölge katmanı kullanın (yumuşak geniş gölge + sıkı koyu gölge).
Küçük öğelerde aşırı büyük bulanıklık değerlerinden kaçının — orantısız görünürler.
Renkli gölgeler (örn. mavi bir düğmede mavi parlama), marka ile tutarlı derinlik için modern bir tasarım tekniğidir.

CSS Kutu Gölgesi ve filter: drop-shadow() — Temel Farklar

Bir karşılaştırma tablosu veya kısa açıklama:

box-shadow, şeffaflıktan bağımsız olarak öğenin dikdörtgen sınırlayıcı kutusuna saygı duyar.
drop-shadow() bir öğenin gerçek görünür şeklini (şeffaf PNG'ler dahil) takip eder.
box-shadow inset'i destekler; drop-shadow() desteklemez.
box-shadow birden çok katmanlı yığını destekler; drop-shadow() desteklemez.

Tarayıcı Desteği ve Tarayıcılar Arası Uyumluluk

box-shadow'un tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge, Opera) tam olarak desteklendiğini ve IE9'dan beri desteklendiğini unutmayın. -webkit- ve -moz- önekleri modern projeler için artık gerekli değildir, ancak eski destek için dahil edilebilirler.

CSS Kutu Gölgeleri İçin Yaygın Kullanım Durumları

Gerçek dünya tasarım senaryoları:

Kart UI bileşenleri — Kartları sayfa arka planının üzerine yükseltme.
Gezinme çubukları — Başlık derinliği oluşturmak için alt gölge ekleme.
Düğmeler — Üzerine gelme/aktif durumlarında 3D basma efektini simüle etme.
Modallar ve diyaloglar — Katmanları arka plandan ayırma.
Form girişleri — Erişilebilirlik ve UX için odak durumu iç parlama.
Görseller — Fotoğrafları veya küçük resimleri ince bir gölge kenarlığıyla çerçeveleme.
İpuçları — İnce bir düşme gölgesiyle yüzen mikro UI öğeleri.

Sıkça Sorulan Sorular

CSS kutu gölgesi oluşturucu nedir?

CSS kutu gölgesi oluşturucu, gölge parametrelerini — ofset, bulanıklık, yayılma, renk ve opaklık — görsel olarak ayarlamanıza olanak tanıyan ve stil sayfanıza doğrudan yapıştırabileceğiniz kullanıma hazır kutu gölgesi CSS bildirimini anında üreten çevrimiçi bir araçtır.

Bu CSS kutu gölgesi oluşturucu ücretsiz mi?

Evet, araç tamamen ücretsizdir. Kayıt, indirme veya ödeme gerekmez. Sadece kaydırıcıları ayarlayın, sonucu canlı önizleyin ve CSS kodunuzu kopyalayın.

CSS kodunu kutu gölgesi oluşturucudan nasıl kopyalarım?

Gölge ayarlarınızı yapılandırdıktan sonra, oluşturulan kutu gölgesi özelliği aracın altındaki CSS çıktı alanında görünür. Panonuza kopyalamak ve CSS dosyanıza yapıştırmak için "Kopyala" düğmesine tıklayın.

CSS kutu gölgesi oluşturucudaki "İç" seçeneği ne işe yarar?

"İç" seçeneğini etkinleştirmek, gölgeyi öğenin dışına değil, içine uygular. Bu genellikle düğmeler ve giriş alanlarında batık veya basılı bir efekt oluşturmak için kullanılır.

Bu kutu gölgesi oluşturucu ile renkli bir parlama efekti oluşturabilir miyim?

Evet. Renk seçiciden canlı bir renk (örneğin, mavi veya mor) seçin ve yayılma değeri 0 olan orta düzeyde bir bulanıklık kullanın. Renkli gölgeler, neon parlama veya marka renkli yükseltme efektleri oluşturmak için popülerdir.

CSS kutu gölgesinde "Yayılma" kaydırıcısı neyi kontrol eder?

Yayılma yarıçapı, gölgeyi öğenin boyutuna göre genişletir veya küçültür. Pozitif bir yayılma, gölgeyi öğeden daha büyük yapar; negatif bir değer ise onu daha küçük yapar, bu da sıkı, gerçekçi bir derinlik efekti oluşturmak için kullanışlıdır.

Bir öğede birden fazla kutu gölgesi kullanabilir miyim?

Evet, CSS, değerleri virgülle ayırarak tek bir öğede birden fazla kutu gölgesini destekler, örneğin: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);. Sıkı koyu bir gölgeyi geniş yumuşak bir gölgeyle katmanlamak, son derece gerçekçi bir derinlik efekti yaratır.

Kutu gölgesi CSS oluşturucusunda bulanıklık ve yayılma arasındaki fark nedir?

Bulanıklık, gölgenin kenarlarının ne kadar yumuşak veya yayılmış göründüğünü kontrol eder. Yayılma, gölgenin öğeye göre genel boyutunu kontrol eder. Büyük yumuşak bir gölgeye (yüksek bulanıklık, sıfır yayılma) veya sert genişlemiş bir gölgeye (sıfır bulanıklık, pozitif yayılma) sahip olabilirsiniz.

CSS kutu gölgeleri için hangi renk formatını kullanmalıyım?

RGBA en esnek formattır çünkü rengi ve opaklığı tek bir değerde birleştirir, örneğin rgba(0,0,0,0.15). HEX renkleri de kullanılabilir ancak ayrı bir opaklık özelliği veya daha yeni 8 haneli HEX formatı gerektirir. Oluşturucu tüm bunları otomatik olarak halleder.

CSS box-shadow özelliği tüm tarayıcılarda çalışır mı?

Evet. box-shadow özelliği Chrome, Firefox, Safari, Edge ve Opera dahil tüm modern tarayıcılarda tam olarak desteklenmektedir. Modern projeler için satıcı öneklerine (-webkit-, -moz-) gerek yoktur.