Bepul CSS Gradient Generatori

Qanday ishlaydi

Gradient generatori CSS gradient satrlarini to'g'ridan-to'g'ri brauzerda quradi — kutubxonasiz, serversiz, yuklashsiz. Qo'lda yozilgan funksiya rang to'xtash nuqtalaringiz va burchagingizdan to'g'ri linear-gradient, radial-gradient yoki conic-gradient sintaksisini real vaqtda yig'adi, so'ng natijani tanlagan chiqish maqsadingizga qarab formatlaydi.

1. 1
   To'xtash nuqtalari va yo'nalishni sozlang

   Brauzerning mahalliy rang tanlagichi yordamida 2 dan 6 gacha rang to'xtash nuqtasini o'rnatasiz, so'ng har bir to'xtashni 0–100% o'qi bo'ylab diapazon sursharshti bilan joylashtirasiz. Chiziqli va konik gradientlar uchun burchakni ham tanlaysiz (0–360°); radial gradientlar uchun shakl (ellips yoki doira) va gradient qancha uzoqqa cho'zilishini boshqaruvchi o'lcham kalit so'zini tanlaysiz.
2. 2
   buildCss gradient satrini yig'adi

   Har bir o'zgarishda, mahalliy buildCss funksiyasi parametrlaringizni to'g'ri CSS funksiya chaqiruviga birlashtiradi — masalan, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Hech qanday kutubxona aralashmaydi; satr oddiy JavaScript shablon mantig'i bilan quriladi va to'xtash massividan to'g'ridan-to'g'ri birlashtiriladi.
3. 3
   Jonli ko'rib chiqish inline uslub orqali chiziladi

   Yig'ilgan gradient satri div elementiga to'g'ridan-to'g'ri inline fon uslubi sifatida qo'llaniladi, shuning uchun brauzerning o'z CSS dvigateli ko'rib chiqishni chizadi. Kanvas yoki rasm aralashmaydi — ko'rgan narsangiz aynan qo'llanilayotgan CSS xususiyati.
4. 4
   To'rt formatda nusxalashga tayyor chiqish

   Format tanlagich bir xil gradient satrini oddiy CSS (background: ...), qattiq-zaxira bilan CSS bloki, Tailwind ixtiyoriy-qiymat sinfi yoki SCSS o'zgaruvchi deklaratsiyasiga aylantiradi. Nusxalashni bosish tanlangan chiqishni navigator.clipboard.writeText orqali buferga yozadi. Joriy gradient shuningdek URL heshiga kodlangan, shuning uchun uni xatchubga qo'shishingiz yoki ulashishingiz mumkin.

Tegishli asboblar