Ücretsiz çevrimiçi CSS box-shadow oluşturucu. Ofset, bulanıklık, yayılım, renk ayarlama, gerçek zamanlı önizleme. Kodu kopyalayın. Tarayıcıda işlenir.
Bu sayfayı yer imlerine eklemek için Ctrl+D tuşlarına basın
CSS Box Shadow Oluşturucu; box-shadow özelliğini görsel olarak düzenleyen ücretsiz bir çevrimiçi araçtır.
Evet, karmaşık derinlik ve efektler oluşturmak için birden fazla gölge ekleyebilirsiniz. Her gölge ayrı ayrı ayarlanabilir.
Inset gölge, öğenin dışında değil içinde görünür. Normal box-shadow dışarıda görünürken, inset eklemek girintili, içe doğru bastırılmış bir efekt oluşturur.
Gerçek gölgeler siyah değildir; arka plan renginin koyulaştırılmış hâlidir ve kenarlara doğru yumuşar. Tek bir ağır %30 siyah gölge yerine, farklı bulanıklık yarıçaplarıyla iki üç çok soluk katman üst üste koyun: örneğin kenara bitişik 1 piksel, arkasında 8 piksel ve daha dışta çok hafif 24 piksel. Işığın yukarıdan geldiğini varsayın: gölgeye yalnızca dikey kayma verin, yatayı sıfırda bırakın.
Durağan bir düzende maliyeti göz ardı edilebilir, ancak animasyon devreye girer girmez durum değişir. Fareyle üzerine gelindiğinde box-shadow değerini geçişle değiştirmek, tarayıcıyı her karede bulanıklığı yeniden hesaplamaya zorlar ve düşük güçlü cihazlarda gözle görülür biçimde takılır. Etkileşimde büyüyen bir gölge gerekiyorsa, önceden çizilmiş bir gölge katmanının opaklığını ya da transform'unu canlandırın; sonuç çok daha akıcı olur.