CSS Box-Shadow Oluşturucu

Gölgeleri görsel olarak ayarlayın ve CSS kodunu anında kopyalayın

**Box-shadow**'un **yatay ve dikey ofsetini**, **bulanıklığını**, **yayılmasını**, **rengini** ve **opaklığını** kaydırıcılarla sezgisel olarak ayarlayın. Önizleme ile gölgeleri gerçek zamanlı olarak hassaslaştırın ve **Neumorphism** gibi karmaşık tasarımları kolayca elde edin. Tamamlanmış CSS kodunu tek bir tıklamayla kopyalayın.

Önizleme

Gölge Özellikleri

Yatay Ofset (X) 0px

Dikey Ofset (Y) 4px

Bulanıklık (Blur) 12px

Yayılma (Spread) 0px

Renk Opaklık

İç Gölge (inset)

Ön Ayarlar

Yumuşak

Orta

Sert

Neumorphism

Nasıl Kullanılır

CSS **box-shadow** oluşturucuyu kullanmak basittir:

Adım 1: Kaydırıcılarla gölgeyi ayarlayın

**Yatay ofset**, **dikey ofset**, **bulanıklık** ve **yayılma** parametrelerini kaydırıcılarla ayarlayın. Değişiklikler gerçek zamanlı olarak önizlemeye yansıtılır.

Adım 2: Renk ve opaklık ayarlayın

Renk seçici ile **gölge rengini** seçin ve **opaklığı (0.0-1.0)** sayısal girişle hassaslaştırın. İç gölge oluşturmak için **inset**'i işaretleyin.

Adım 3: CSS kodunu kopyalayın

Önizlemeyi kontrol ederken ayarlayın, ardından tamamlanmış CSS kodunu tek bir tıklamayla kopyalayın.

Bu araç tamamen tarayıcınızda çalışır. Tüm işleme cihazınızda gerçekleşir. Hiçbir veri harici olarak gönderilmez.

Kullanım Alanları

CSS **box-shadow** oluşturucu aşağıdaki senaryolarda kullanılabilir:

1. Kart stilindeki kullanıcı arayüzü için derinlik oluşturma

Blog yazısı kartlarına veya ürün kartlarına yumuşak gölgeler ekleyerek ekrandan yüzüyormuş gibi görünen bir derinlik hissi yaratın. Kullanıcı dikkatini yönlendirir ve tıklama oranlarını iyileştirir.

2. Düğme üzerine gelme efektleri (Hover effects)

Öğenin tıklanabilir olduğunu görsel olarak iletmek için düğmelerin üzerine gelindiğinde gölgeleri güçlendirin. Kullanılabilirliği doğrudan iyileştirir.

3. Modal pencereleri arka plandan ayırma

Modal pencerelere koyu gölgeler uygulayarak onları arka plan içeriğinden açıkça ayırın. Kullanıcı dikkatini belirli eylemlere odaklar.

4. Neumorphism tasarım

Birden fazla gölgeyi birleştirerek **Neumorphism** (Yeni Skeuomorfizm) tasarımını elde edin. En son UI trendlerini içeren sofistike arayüzler oluşturun.

5. Form girişleri için odak göstergesi

Mevcut aktif alanı görsel olarak vurgulamak için odaklanma anında giriş öğelerine iç gölgeler (**inset**) uygulayın. Form kullanılabilirliğini iyileştirir.

6. Sabit başlık (Header) navigasyon çubuğu

Kaydırma sırasında sabit kalan başlıklara gölgeler ekleyerek içerik ve başlık arasındaki sınırı netleştirin. Hem okunabilirliği hem de tasarım kalitesini sağlar.

CSS box-shadow nedir

**box-shadow**, HTML öğelerine gölge ekleyen bir CSS özelliğidir. Yalnızca CSS kodu kullanarak, resimler olmadan derinlik ve boyutsallık ifade edebilen temel bir web tasarım tekniğidir.

box-shadow parametreleri

**box-shadow** 'yatay-ofset dikey-ofset bulanıklık yayılma renk' sırasıyla belirtilir. Yatay ve dikey ofsetler gölgenin konumunu belirler, bulanıklık kenar yumuşaklığını kontrol eder, yayılma gölge boyutunu kontrol eder ve renk, şeffaflık dahil olmak üzere **RGBA** ile belirtilebilir.

inset (İç gölge)

**inset** anahtar kelimesini eklemek, gölgeyi dışarı yerine öğenin içine çizer. Girintili form girişlerini veya basılı düğme durumlarını ifade etmek için uygundur.

Birden çok gölge katmanlama

Gölgeleri katmanlamak için virgülle ayrılarak birden çok **box-shadows** belirtilebilir. **Neumorphism** tasarımı, üç boyutlu bir doku ifade etmek için açık ve koyu gölgeleri birleştirir.

Sıkça Sorulan Sorular

CSS box-shadow oluşturucu ücretsiz mi?

Evet, kullanımı tamamen **ücretsiz**dir. Kayıt gerekmez ve tarayıcınızda çalışır, böylece hemen kullanmaya başlayabilirsiniz.

Bulanıklık (blur) ve yayılma (spread) arasındaki fark nedir?

**Bulanıklık**, gölge kenarının ne kadar yumuşak olduğunu belirlerken, **yayılma**, gölge boyutunun ne kadar büyütüleceğini veya küçültüleceğini belirler. **0** bulanıklık ve **10** yayılma ile keskin, büyük bir gölge elde edersiniz.

Neumorphism nedir?

**Neumorphism**, öğelerin ekrandan dışarı çıkmış veya içeri girintili görünmesini sağlamak için açık ve koyu gölgeleri birleştiren bir tasarım tekniğidir. Modern, sofistike bir izlenim yaratır.

Ne zaman inset (iç gölge) kullanmalıyım?

Giriş alanları veya basılı düğme durumları gibi girintili öğeleri ifade ederken kullanın. Normal (dış) gölgelerle birleştirilmesi daha üç boyutlu bir ifade sağlar.

box-shadow'un performansa etkisi nedir?

**box-shadow** nispeten hafif bir CSS özelliğidir, ancak büyük bulanıklığa veya birden çok katmanlı gölgeye sahip gölgeler, oluşturma yükünü artırabilir. Akıllı telefonlar için ek dikkat gereklidir.

Tüm tarayıcılar tarafından destekleniyor mu?

**box-shadow**, IE9+, **Chrome**, **Firefox**, **Safari** ve **Edge** dahil olmak üzere tüm büyük tarayıcılar tarafından desteklenir. Daha eski tarayıcılar, tedarikçi ön ekleri (-webkit-box-shadow) gerektirebilir.

Gölge rengi RGB mi yoksa RGBA mı olmalı?

Opaklık ayarına izin verdiği için **RGBA** önerilir. Genel olarak, **0.1-0.3** gölge opaklığı, arka planlarla iyi uyum sağlayan doğal gölgeler oluşturur.

Oluşturulan CSS kodunu olduğu gibi kullanabilir miyim?

Evet, oluşturulan kod, CSS dosyanıza kopyalayıp yapıştırılarak hemen kullanılabilir. Bir **box-shadow** özelliği olarak yazılmıştır ve uygulamaya hazırdır.