Box Shadow Oluşturucu
CSS box-shadow özellikleri oluşturun
Gölge katmanları
Gölge 1
Hazır gölgeler
Gölge ipuçları
Pozitif kayma değerleri gölgeleri aşağı ve sağa, negatif değerler yukarı ve sola kaydırır.
Bulanıklık yarıçapı gölgenin yumuşaklığını belirler; yüksek değerler daha dağınık gölgeler oluşturur.
Yayılma yarıçapı gölge boyutunu büyütür veya küçültür.
İç gölgeler, derinlik efektleri için içeride görünen gölgeler oluşturur.
Karmaşık ışık efektleri için birden fazla gölge üst üste katmanlanabilir.
Düşük opaklık değerleri daha hafif ve gerçekçi gölgeler oluşturur.
Canlı önizleme
Önizleme ölçeği: 100%
CSS bildirimi
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSS sınıfı
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (yaklaşık)
shadowBu bir stil önerisidir. Özel kaymalar, renkler, iç gölge ve birden fazla katman için üretilen CSS gerekir.
Bir katmanı ayarlayın veya hazır bir gölge deneyin. Önizleme siz çalıştıkça güncellenir.
Box Shadow Oluşturucu hakkında
Ücretsiz CSS Box Shadow Oluşturucu aracımız, tam görsel kontrolle profesyonel gölge efektleri oluşturmanıza yardımcı olur. Sezgisel kaydırıcılarla kaydırma, bulanıklık yarıçapı, yayılma yarıçapı, renk ve opaklığı ayarlayın; sonucun gerçek zamanlı güncellenmesini izleyin. Arayüz öğelerinizi öne çıkaran karmaşık derinlik efektleri için birden fazla gölgeyi katmanlar hâlinde birleştirin.
Gölgeler, modern web arayüzlerinde görsel hiyerarşi ve derinlik oluşturmak için vazgeçilmezdir. İyi tasarlanmış bir box-shadow, kartların sayfanın üzerinde yüzüyormuş gibi görünmesini, düğmelerin etkileşimli hissettirmesini ve gezinme öğelerinin arka plandan ayrılmasını sağlayabilir. Bu araç, box-shadow değerlerini elle yazarken yapılan deneme yanılmaları ortadan kaldırır.
Oluşturucu hem dış gölgeleri hem de iç gölgeleri, birden fazla gölge katmanını destekler ve yaygın gölge stilleri için 6 hazır şablon içerir. Çıktı, tek tıkla kopyalama düğmesiyle CSS kodu olarak sunulur; ayrıca yaklaşık Tailwind CSS yardımcı sınıf önerileri verilir. Tüm işlemler tarayıcınızda gerçekleşir ve hiçbir sunucuya veri gönderilmez.
Temel özellikler
- Eklenebilen, kaldırılabilen ve ayrı ayrı ayarlanabilen çoklu gölge katmanları
- X kaydırması, Y kaydırması, bulanıklık yarıçapı ve yayılma yarıçapı için hassas kaydırıcı kontrolleri
- Her gölge katmanı için HEX girişi ve ayarlanabilir opaklık sunan renk seçici
- İç derinlik ve kabartma efektleri oluşturmak için iç gölge anahtarı
- 6 hazır gölge şablonu: Hafif, Orta, Büyük, Çok büyük, İç ve Çoklu
- Yaratıcı gölge kombinasyonları keşfetmek için rastgele gölge oluşturucu
- Öğe rengi özelleştirilebilen gerçek zamanlı canlı önizleme
- Temiz CSS çıktısıyla tek tıkla panoya kopyalama
- CSS sınıfı ve yaklaşık Tailwind CSS yardımcı sınıfı dâhil alternatif çıktı biçimleri
- Her türlü aydınlatmada rahat düzenleme için tam koyu mod desteği
Box Shadow Oluşturucu nasıl kullanılır?
- Gölge katmanları ekleyin: Varsayılan gölgeyle başlayın veya karmaşık efektler için ek gölge katmanları oluşturmak üzere Ekle'ye tıklayın.
- Gölge özelliklerini ayarlayın: Her gölge katmanının X/Y kaydırmasını, bulanıklık yarıçapını, yayılma yarıçapını, rengini ve opaklığını kaydırıcılarla belirleyin.
- İç gölgeyi açıp kapatın: Dış gölge yerine iç gölge efekti oluşturmak için herhangi bir gölge katmanındaki İç gölge onay kutusunu işaretleyin.
- Sonucu önizleyin: Gölgenizin tam olarak nasıl göründüğünü görmek için canlı önizleme öğesini inceleyin. Gerekirse önizleme öğesinin rengini değiştirin.
- Hazır ayarları deneyin: Yaygın gölge stillerini başlangıç noktası olarak hızla uygulamak için 6 hazır şablondan birine tıklayın.
- CSS kodunu kopyalayın: box-shadow CSS bildiriminin tamamını panonuza kopyalamak için Kopyala düğmesine tıklayın.
Kullanım alanları
- Kart yüksekliği: Kart bileşenlerine derinlik ekleyerek sayfa arka planının üzerinde yüzüyormuş gibi görünmelerini sağlayın.
- Düğmelerin üzerine gelme durumları: Kullanıcı etkileşimine görsel tepki veren düğmeler için gölge geçişleri oluşturun.
- Modal ve iletişim kutusu stili: Arka plandan net biçimde ayrılmaları için modallara ve iletişim kutularına büyük, yumuşak gölgeler uygulayın.
- Gezinme açılır menüleri: Açılır menülere ve açılır panellere katmanlaşmayı ve derinliği yansıtan gölgeler ekleyin.
- Giriş odağı efektleri: Form alanları ve etkileşimli öğelerde odak göstergesi olarak renkli gölgeler kullanın.
- İç gölge efektleri: Açma kapama düğmeleri, etkin durumlar ve dekoratif öğeler için basılı veya kabartmalı görünümler oluşturun.
- Neumorfizm tasarımı: Popüler yumuşak arayüz estetiğini elde etmek için birden fazla açık ve koyu gölgeyi birleştirin.
- Görsel çerçeveleme: Özenli bir galeri görünümü için görsellere ve medya kapsayıcılarına hafif gölgeler ekleyin.
Sıkça sorulan sorular
Bu araç ücretsiz mi?
Evet, Box Shadow Oluşturucu tamamen ücretsizdir ve oluşturabileceğiniz gölge sayısı sınırsızdır. Kayıt veya ödeme gerekmez.
Verilerim güvende mi?
Tüm gölge oluşturma ve önizleme işlemleri tamamen tarayıcınızda gerçekleşir. Hiçbir harici sunucuya veri gönderilmez; böylece ayarlarınız ve CSS çıktınız tamamen gizli kalır.
Bulanıklık ve yayılma yarıçapı arasındaki fark nedir?
Bulanıklık yarıçapı, gölgenin ne kadar yumuşak veya dağınık görüneceğini belirler; yüksek değerler daha kademeli bir solma oluşturur. Yayılma yarıçapı, gölgenin boyutunu öğeye göre genişletir (pozitif değerler) veya daraltır (negatif değerler).
Bir öğede birden fazla gölge kullanabilir miyim?
Evet, CSS virgülle ayrılan birden fazla box-shadow değerini destekler. Bu araç, birden fazla gölge katmanı eklemenizi sağlar ve bunları otomatik olarak tek bir box-shadow bildiriminde birleştirir.
İç gölge nedir?
İç gölge, öğenin dışında değil içinde çizilerek çökük veya içe basılmış bir görünüm oluşturur. Genellikle giriş alanlarında, etkin düğme durumlarında ve neumorfizm tasarımlarında kullanılır.
box-shadow tüm tarayıcılarda destekleniyor mu?
Evet, box-shadow özelliği Chrome, Firefox, Safari, Edge ve Opera dâhil tüm modern tarayıcılarda tam olarak desteklenir. Üretici önekleri gerekmez.
İpuçları ve en iyi uygulamalar
- Gölgeleri hafif tutun: Düşük opaklık (%5-15) ve orta düzey bulanıklık, tasarımı boğmayan gerçekçi ve profesyonel gölgeler oluşturur.
- Negatif yayılma kullanın: Küçük bir negatif yayılma yarıçapı, gölgelerin öğenin altında daha dar ve odaklı görünmesini sağlar.
- Birden fazla gölgeyi katmanlayın: Gerçek dünyadaki aydınlatmaya benzer doğal bir derinlik için dar, koyu bir gölgeyi daha geniş, açık bir gölgeyle birleştirin.
- Işık kaynağınıza uyum sağlayın: Tek ve tutarlı bir ışık kaynağını taklit etmek için tasarımınız genelinde kaydırma yönlerini tutarlı tutun.
- Performansı dikkate alın: Çok sayıda öğede yüksek bulanıklık değerleri, özellikle mobil cihazlarda çizim performansını etkileyebilir.
- Hiyerarşi için gölgeler kullanın: Daha yüksek konum (daha büyük kaydırma ve bulanıklık), görsel katmanlarda kullanıcıya daha yakın öğeleri belirtmelidir.