CSS kutu gölgesi oluşturucu
CSS box-shadow değerini offset, bulanıklık, yayılım ve renkten oluşturun, çoklu katmanlar ve ön ayarlarla.
CSS kutu gölgesi oluşturucu
Yatay ve dikey offset, bulanıklık yarıçapı, yayılım yarıçapı ve rengi ayarlayın ve bu araç çalışırken eşleşen box-shadow bildirimini bir araya getirir. Günlük durumlar için — bir kart, bir düğme, sayfadan çıkması gereken bir modal — yanı sıra birkaç gölgenin üst üste yığılmasıyla oluşan katmanlı gölgeler, çoğu modern tasarım sisteminde bulunan yumuşak, gerçekçi derinlik tekniğinin arkasındaki tekniktir.
Ön ayar açılır menüsü hafif, orta ve güçlü yükseltim sunuyor, her birinin kendi katman sayısı, offset ve bulanıklığı önceden ayarlanmış; tüm değerleri kendiniz belirlemek için özel seçin. Katmanlar seçeneği kaç gölgenin üst üste geleceğini kontrol eder: eklenen her katman offset ve bulanıklığı dizinine göre arttırır ve opasite düşürür, tek düz gölgeyi yumuşak, ikna edici bir sonuca dönüştürür. İç gölge seçeneği gölgeyi basılı öğelerin içine çevirir, opasite rengin ne kadar güçlü görüneceğini kontrol eder ve birim anahtarı px veya rem çıkarır. Koyu mod varyantını açın, bir @media (prefers-color-scheme: dark) bloğu içinde sarmalanmış daha güçlü bir bildirim için — koyu arka plana karşı görünür kalmak için gölgenin daha fazla opasite gerekir. Sonucun tek satır, --box-shadow özel özelliği veya .box-shadow sınıfı olarak çıkıp çıkmayacağını seçin ve SVG ikon veya saydam PNG gibi box-shadow'un ulaşamayacağı öğeler için eşleşen filter: drop-shadow satırı ekleyin.
Her değer makul bir aralığa sıkıştırılmıştır ve tanınmayan bir renk geçersiz CSS yerine siyaha döner, bu nedenle çıktı her zaman bir stil sayfasına temiz bir şekilde yapıştırılabilir.
Her şey tarayıcınızda kontrolleri ayarlarken çalışır — hiçbir renk veya oluşturulan CSS hiçbir yere gönderilmez. Sonucu kopyalayın, .txt dosyası olarak indirin veya üzerinde çalışmaya devam etmek için başka bir araca gönderin.