Box-shadow oluşturucu
Tamamen tarayıcınızda çalışır. Dosyalarınız ve verileriniz cihazınızdan hiç çıkmaz.
Bu araç hakkında
Kaydırıcılarla ofseti, bulanıklığı, yayılmayı, rengi ve opaklığı ayarlayın; önizleme kutusunun gerçek zamanlı güncellendiğini görün. Üretilen CSS siz sürüklerken güncellenir, doğrudan bir stil dosyasına kopyalamaya hazırdır.
Verilerim bir yere yükleniyor mu?
Hayır, her şey tarayıcınızda çalışır; yükleyecek hiçbir şey yoktur ve oluşturduğunuz hiçbir şey izlenmez.
Ofset, bulanıklık ve yayılma tam olarak neyi kontrol ediyor?
Yatay ve dikey ofset gölgeyi kutudan uzaklaştırır: pozitif değerler sağa ve aşağı iter, negatif değerler sola ve yukarı iter. Bulanıklık, gölgenin kenarının ne kadar yumuşak olduğunu belirler; sıfırda keskin bir siluetten, yüksek değerlerde dağınık bir parıltıya kadar. Yayılma, bulanıklık uygulanmadan önce gölgenin şeklini büyütür ya da küçültür; pozitif bir yayılma gölgeyi kutunun her tarafında daha büyük yapar, negatif bir yayılma ise içe doğru küçültür. Renk ve opaklık birlikte çalışır: herhangi bir hex renk seçin, opaklık kaydırıcısı bunun ne kadar dolgun ya da soluk göründüğünü belirler; araç bunu arka planda standart bir rgba() değerine çevirir. İçe gölge (inset) seçeneğini açmak, gölgeyi kutunun kenarının dışından içine taşır; kabartma yerine basık ya da oyulmuş bir görünüm elde etmenin yolu budur.
Birden fazla gölge katmanı nasıl çalışır?
CSS’in izin verdiği şekilde gölgeleri üst üste yığmak için birkaç katman ekleyin, her biri nihai box-shadow değerinde virgülle ayrılır. Yaygın bir yaklaşım, kutuya yakın, dar, koyu ve düşük opaklıklı bir gölgeyi, daha uzakta duran daha yumuşak, geniş ve açık bir gölgeyle eşleştirmektir; bu, tek bir gölgenin veremeyeceği daha doğal bir derinlik hissi verir. Katmanlar eklediğiniz sırayla çizilir, ilk katman en üstte durur; bu, tarayıcının virgülle ayrılmış box-shadow değerlerini nasıl çizdiğiyle örtüşür. Aynı yığında inset ve inset olmayan katmanları karıştırabilirsiniz; bu, hem hafif bir dış gölgeye hem de hafif bir iç vurguya aynı anda ihtiyaç duyan bir kart için işe yarar.
Yaygın kullanım alanları: derinlik gereken kartlar ve butonlar, neumorphic ya da içe gömük efektler, ya da piksel değerlerini elle tahmin etmeden doğru gölgeyi bulmak. Tam söz dizimi ve tarayıcı desteği için MDN’nin box-shadow referansına, üretilen CSS’teki rgba() değerlerinin nasıl çalıştığına dair MDN’nin CSS renkleri rehberine bakabilirsiniz.