CSS gradient generatoru
Gradient növünü seçin, rəngləri və onların mövqeyini dəyişin — fon dərhal yenilənir, aşağıda isə background üçün hazır CSS kodu görünür.
.element {
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
}Necə istifadə etmək olar
- Yuxarıda növü seçin:
linear(düz xətt üzrə),radial(mərkəzdən dairəvi) və yaconic(mərkəz ətrafında fırlanma). - Bucağı və ya mövqeyi tənzimləyin: linear üçün
90degsoldan sağa,180degyuxarıdan aşağıya deməkdir. - Rəng nöqtələrini dəyişin: hər nöqtənin rəngi və faizlə mövqeyi var. «+ Əlavə et» ilə 6 nöqtəyə qədər əlavə edin.
- «Kopyala» düyməsini basın və kodu öz CSS faylınıza yapışdırın.
Bu necə işləyir
Gradient — bu şəkildir, rəng yox
CSS-də gradient <image> tipinə aiddir, ona görə background-color ilə yox, background və ya background-image ilə yazılır. Generator ilk sətirdə adi rəng də verir — gradienti dəstəkləməyən mühitdə fon boş qalmasın deyə.
Bucaq və istiqamət
linear-gradient(90deg, …) xətti soldan sağa çəkir. Bucaq əvəzinə açar sözlər də olar: to right, to bottom right. 0deg aşağıdan yuxarıya, 180deg yuxarıdan aşağıya deməkdir.
background: linear-gradient(to right, #2563eb, #7c3aed);Rəng nöqtələri (color stops)
Hər rəngdən sonra mövqe yazmaq olar: #f00 0%, #00f 100%. İki nöqtə eyni mövqedə olarsa, keçid kəskin olur — zolaqlar belə çəkilir.
background: linear-gradient(90deg, #2563eb 50%, #7c3aed 50%);radial və conic
radial-gradient(circle at center, …) rəngləri mərkəzdən kənara yayır, conic-gradient(from 0deg, …) isə mərkəz ətrafında fırladır — diaqramlar və rəng çarxı üçün əlverişlidir. repeating- prefiksi nümunəni təkrarlayır.
Tez-tez verilən suallar
Gradienti mətnə necə tətbiq etmək olar?
Gradienti background kimi verin, sonra background-clip: text və color: transparent yazın. Mətn gradientlə rənglənəcək.
Niyə background-color: linear-gradient(...) işləmir?
Çünki gradient rəng deyil, şəkildir. background və ya background-image istifadə edin.
Gradient animasiya oluna bilərmi?
Gradientin özü birbaşa animasiya olunmur. Adətən background-size böyüdülür və background-position animasiya edilir və ya @property ilə rəng dəyişəni qeyd olunur.
Brauzerlər dəstəkləyirmi?
linear-gradient və radial-gradient bütün müasir brauzerlərdə işləyir, conic-gradient də 2020-ci ildən bəri bütün əsas brauzerlərdə var. Prefikslər (-webkit-) artıq lazım deyil.
