CSS gölge oluşturucu
Kartlar, butonlar ve görseller için doğal görünen gölgeler oluşturun. Katmanları tek tek ayarlayın ya da yumuşak gölge üreticisiyle birkaç katmanı tek seferde oluşturun; hazır CSS kodunu kopyalayın.
Ücretsiz · Kayıt gerekmez · Tarayıcıda çalışır
Dosyalarınız sunucuya yüklenmez; tüm işlem tarayıcınızda yapılır.
Nasıl kullanılır?
- Hazır bir gölge seçin veya yumuşak gölge üreticisini kullanın.
- Katmanların konumunu, bulanıklığını, yayılmasını, rengini ve opaklığını ayarlayın.
- Önizlemedeki kutunun rengini, köşe yuvarlaklığını ve arka planı değiştirin.
- Oluşan box-shadow kodunu kopyalayın.
Öne çıkanlar
- En fazla 6 katman ve iç gölge (inset).
- Yumuşak, katmanlı gölge üreticisi.
- Açık ve koyu arka planda canlı önizleme.
- Hazır gölgeler ve tek tıkla CSS kopyalama.
Sık sorulan sorular
box-shadow nasıl yazılır?
Biçim: box-shadow: x y bulanıklık yayılma renk. Örneğin box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12). Virgülle ayırarak birden fazla gölge eklenebilir.
Katmanlı gölge neden daha doğal görünür?
Gerçek dünyada gölge, nesneye yakın yerde koyu ve keskin, uzaklaştıkça açık ve yumuşaktır. Farklı mesafelerdeki birkaç hafif gölgeyi üst üste koymak bu etkiyi taklit eder.
İç gölge (inset) ne işe yarar?
inset anahtar kelimesi gölgeyi kutunun içine çizer; basılmış butonlar, giriş alanları ve oyuk görünümler için kullanılır.
Gölgeler performansı etkiler mi?
Statik gölgeler sorun oluşturmaz. Çok sayıda büyük gölgeyi sürekli animasyonla değiştirmek ise yavaşlamaya yol açabilir; animasyonda gölge yerine opaklık veya transform tercih edin.
Profesyonel bir tasarıma mı ihtiyacınız var?
Sosyal medya tasarımları, reklam görselleri, afiş, logo ve kurumsal kimlik projeleriniz için iletişime geçebilirsiniz.