Pulsuz CSS Qradient Generatoru
Canlı önizləmə ilə xətti, radial və konik CSS qradientlər yaradın. CSS-i bir klikdə kopyalayın.
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);Çox fərqli rənglər arasında boz orta nöqtələrin qarşısını alır. Köhnə brauzerlər üçün ehtiyat olaraq sadə sRGB sətri əlavə edir.
Hazır dəstlər
Ümumi istifadələr
- Qəhrəman Bölmələri üçün Qradienlər YaradınSayt qəhrəman bölmələri və eni bölmə səhifələri üçün tam səhifə qradient fona dizayn edin.
- Qradient Düymələr və CTA YaradınDiqqəti cəlb edən hərəkət çağırışları üçün gözü cəzbedici qradient düymə fonlarını dizayn edin.
- Kartlar üçün Qradient Fonları YaradınKartlar, modallar, yan çubuqlar və UI komponent fonları üçün qradient dolguları dizayn edin.
- Sosial Media Qrafikası üçün Qradienlər YaradınInstagram postu, YouTube miniatürləri və Twitter kartları üçün canlı qradient fonları dizayn edin.
- Diaqramlar üçün Rəng Şkalası Yaradınİstilik xəritələri, irəliləmə çubuqları və məlumat vizuallaştırması üçün qradient rəng şkalaları yaradın.
Necə İşləyir
Qradiyent yaradıcısı CSS qradiyent sətirlərini birbaşa brauzerdə qurur — kitabxana yoxdur, server yoxdur, yükləmə yoxdur. Əl ilə yazılmış bir funksiya rəng dayanacaqlarınızdan və bucağınızdan düzgün linear-gradient, radial-gradient, ya da conic-gradient sintaksisini real vaxtda yığır, sonra nəticəni seçdiyiniz çıxış hədəfinə görə formatlayır.
- 1Dayanacaqları və istiqaməti konfiqurasiya edinBrauzerin doğma rəng seçicisi istifadə edərək 2 ilə 6 arasında rəng dayanacağı təyin edirsiniz, sonra hər dayanacağı 0–100% oxu boyunca bir aralıq sürüşdürücüsü ilə mövqeləndirirsiniz. Xətti və konik qradiyentlər üçün bir bucaq da (0–360°) seçirsiniz; radial qradiyentlər üçün forma (ellips ya da dairə) və qradiyentin nə qədər genişlənəcəyini idarə edən ölçü açar sözünü seçirsiniz.
- 2buildCss qradiyent sətrini yığırHər dəyişiklikdə, lokal bir buildCss funksiyası parametrlərinizi düzgün CSS funksiya çağırışına birləşdirir — məsələn, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Heç bir kitabxana iştirak etmir; sətir düz JavaScript şablon məntiqi ilə qurulur və birbaşa dayanacaq massivindən birləşdirilir.
- 3Canlı önizləmə inline stil vasitəsilə render olunurYığılmış qradiyent sətri birbaşa bir div elementinə inline bir fon stili kimi tətbiq edilir, ona görə brauzerin öz CSS mühərriki önizləməni render edir. Canvas və ya şəkil iştirak etmir — gördükləriniz hərfi olaraq tətbiq olunan CSS xüsusiyyətidir.
- 4Dörd formatda kopyalamağa-hazır çıxışBir format seçici eyni qradiyent sətrini düz CSS-ə (background: ...), bir CSS-birlikdə-bərk-ehtiyat blokuna, bir Tailwind özbaşına-dəyər sinfinə, ya da bir SCSS dəyişən bəyanatına çevirir. Kopyala düyməsinə klikləmək seçilmiş çıxışı navigator.clipboard.writeText vasitəsilə mübadilə buferinə yazır. Cari qradiyent həmçinin URL heşinə kodlaşdırılır, ona görə onu əlfəcinə əlavə edə və ya paylaşa bilərsiniz.
Əlaqəli Alətlər
CSS Grid Generatoru
CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.
CSS Flexbox Generatoru
Flex istiqaməti, qapanma, haqlı və düzəltmə ilə canlı elementlər üzərində eksperiment edin — və CSS-i kopyalayın.
Matris Kalkulyatoru
Matrisləri toplayın, çıxın, vurun, transponə edin, tərsini tapın və sadələşdirin, üstəlik determinant, rank, məxsusi qiymətlər və Ax = b həlli — 8×8-ə qədər, bir toxunuşla kopyalama ilə. Pulsuz və məxfi.