CSS Box Shadow generatoru
Cihazınızda işləyir. Heç nə göndərilmir.Hər şey brauzerinizdə işləyir - heç nə göndərilmir.
Bununla başla
Qatlar
Üfüqi sürüşmə
Şaquli sürüşmə
Bulanıqlıq
Yayılma
Rəng
Kod
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Mövcud kölgəni redaktə et
Qatlar, daxili kölgə və yumşaq hazır ayarlarla CSS kölgələri dizayn edin, canlı görün, CSS və ya Tailwind sinfi kimi kopyalayın. Mövcud kölgəni yapışdırıb redaktə edin.
İstədiyiniz kölgəni rəqəm təxmin etməklə yox, gözlə qurun. Hazır ayardan başlayın - yumşaq, orta, sərt retro, yumşaq qatlı, havada, daxili, neomorfik və ya parıltı - sonra hər qatın sürüşməsini, bulanıqlığını, yayılmasını, rəngini, qeyri-şəffaflığını və daxili kölgəsini dəqiq tənzimləyin; önizləmə sürüşdürdükcə yenilənir. Kölgədə səkkizə qədər qat ola bilər - ən təbii kölgələr belə yaradılır. Nəticəni CSS və ya Tailwind sinfi kimi kopyalayın, linklə paylaşın və ya üslub faylınızdakı box-shadow-u yapışdırıb üzərində işləməyə davam edin.
Tez-tez verilən suallar
Bulanıqlıq və yayılma nə edir?
Bulanıqlıq kölgənin kənarını yumşaldır: 0 kəskin xətdir, böyük dəyərlər onu daha çox piksel boyu soldurur. Yayılma kölgəni bulanıqlaşdırmadan əvvəl böyüdür (müsbət) və ya kiçildir (mənfi) - kiçik mənfi yayılma və böyük bulanıqlıq müasir interfeyslərdəki yumşaq, içəri çəkilmiş kölgəni verir.
Niyə bir neçə qat?
Real kölgələr əşyaya yaxın tünd və kəskin, uzaqlaşdıqca açıq və yumşaq olur. Bir qat hər ikisini edə bilməz; "Yumşaq qatlı" hazır ayarındakı kimi sürüşməsi və bulanıqlığı ikiqat artan bir neçə qatı üst-üstə qoymaq daha təbii görünür.
Daxili (inset) kölgə nədir?
Daxili kölgə qutunun xaricində yox, içində çəkilir və qutu basılmış kimi görünür - giriş sahələri, çuxurlar və basılmış düymələr üçün əlverişlidir. Bir kölgədə daxili və xarici qatları qarışdırmaq olar.
box-shadow səhifəni yavaşladır?
Bir neçə kölgə demək olar ki, xərc yaratmır. Çoxlu elementdə çox böyük bulanıqlıq və ya box-shadow-un özünü animasiya etmək zəif telefonlarda kadr sürətini sala bilər; animasiya üçün artıq kölgəsi olan psevdo-elementin qeyri-şəffaflığını dəyişin.