CSS Qradiyent Generatoru

Rəng və bucağı seçərək CSS qradiyent kodunu ön izləmə ilə yaradın

Yeniləmə məlumatıCSS qradiyent generatorunu əlavə edin, rəng və bucaq seçərək kod yaradınYeniləmələri göstər

Xüsusiyyətlər

Ön izləmə və Kod Eyni Vaxtda Yenilənir

Rəng və ya bucaq dəyişdilə biləcəyi zaman görünüş və CSS eyni vaxtda dəyişir

Xətti, Dairəvi və Konusvari Dəstəklənir

Hər bir növ üçün bucağ, forma, mərkəz mövqeyini ətraflı təyin edin

Maksimum 10 Rəng Sürüşdürməklə Tənzimləyin

Rəngin mövqeyini çubuqda sürüşdürərək, şəffaflığı sürğü ilə tənzimləyin

8 Nümunə və Təsadüfi Yaratma

Standart rəng sxemindən və ya təsadüfi sxemindən başlayaraq yaxşılaşdırma edin

İstifadə Qaydası

Növü Seçin

Xətti, dairəvi və ya konusvari qradiyentin növünü seçin

Rəngi Müəyyən Edin

Rəng kodu və ya nümunə ilə rəng seçin, "Rəng Əlavə Edin" ilə rəng artırın və mövqe və şəffaflığı tənzimləyin

İstiqamətini Tənzimləyin

Xətti üçün bucaq və ya istiqamət düymələrini, dairəvi və konusvari üçün mərkəz mövqeyini təyin edin

Kodu Kopyalayın

"Kopyala" düyməsi ilə bir sətirlik CSS-ni özünüzün stilinə yapışdırın

İstifadə Halları

Qəhrəman Şəklinin Fonunu Yaradın

Sayt üzrə və ya düymə fonunun rəngini kod yazmadan müəyyən edin

Blok Başlığının Rəng Sxemini Seçin

Nümunədən yaxın rəng sxemini seçərək məqalə başlığı fonunu düzəltin

Fotoya Üst Qat Overlay

Şəffaflığı azaltmış rəng ilə fotoya üst qat yarıştəffaf təbəqə yaradın

Çox Rəngli Qradiyentin Tənzimlənməsi

3 və ya daha çox rəngin sərhədinin mövqeyini sürüşdürərək tədricən daraltın

Əsas Bilik

linear, radial və conic arasındakı fərq

CSS-nin qradiyentində rəngin dəyişmə şəkli fərqli olan 3 funksiya var və hamısı background xassəsinə yazılır.

linear-gradient：linear-gradient, göstərilən bucaqda düz xətt boyunca rəng dəyişən xətti qradiyentdir.
radial-gradient：radial-gradient, mərkəz mövqeydən kənara doğru dairə və ya oval şəklində rəng yayılan dairəvi qradiyentdir.
conic-gradient：conic-gradient, mərkəz mövqenin ətrafında saat istiqamətində bir dönüş zamanı rəng dəyişən konusvari qradiyentdir.

Bucaq və İstiqamət Açar Sözlərin Uyğunluğu

linear-gradient-nin bucağı, 0deg aşağıdan yuxarıya doğru olan istiqamətdir və rəqəm arttıqca saat istiqamətində fırlanır. Bucaq "to right" kimi istiqamət açar sözü ilə də yazıla bilər, 90deg "to right" ilə, 180deg "to bottom" ilə eyni istiqamətdir.

Rəng Dayanacağı Nöqtələri və Şəffaflığın Yazılması

Rəng dayanacağı nöqtəsi (color stop), qradiyentdə o rəngə çevrilən mövqe deməkdir, 0% başlanğıc nöqtəsi, 100% son nöqtəsi ifadə edir. Məsələn, "#3B82F6 0%, #8B5CF6 100%" başlanğıcda mavi rəngdən son nöqtədə bənövşə rəngə dəyişən təyin edir.

#RRGGBB formatı：#RRGGBB formatı, qırmızı, yaşıl, mavi gücünün 2 rəqəmli heksadesimal olaraq ifadə edilən rəng yazma üsuludur, #FF0000 qeyri-şəffaf qırmızı rəngi ifadə edir.
rgba formatı：rgba formatı, qırmızı, yaşıl, mavi dəyəri (0~255) ilə şəffaflığı (0~1) əlavə edən rəng yazma üsuludur, 0.5 şəffaflığı yarıştəffaf rəng ifadə edir.