CSS gradiyent va soya generatori: foydalanish tartibi
- 1
Gradiyent yoki soyani tanlang
Koʻrinish ustidagi yorliqlar bilan ikki muharrir orasida almashing.
- 2
Tayyor namunadan boshlang
Yuklash uchun namuna plitkasini bosing yoki odatiy holatni qoldirib, undan boshlab sozlang.
- 3
Vizual sozlang
Rang nuqtalarini suring va burchakni belgilang yoki soya qatlamlarini qoʻshib, siljish, xiralik va yoyilishni moslang.
- 4
Kodni nusxalang
CSS eʼlonini yoki Tailwind klassini nusxalab, loyihangizga joylang.
Cheklovlar va Pro
Bepul, roʻyxatdan oʻtishsiz: cheksiz rang nuqtalari va soya qatlamlari, 3 xil gradiyent turi, 3 ta rang aralashtirish fazosi va 24 ta tayyor namuna.
Pro reklamani olib tashlaydi; ikkala muharrir ham barcha tariflarda toʻliq ishlaydi. Pro tarifini koʻrish
CSS gradiyent va soya generatori haqida
Gradiyent va soya — brauzerning dasturchi vositalarida eng koʻp “sinab-xato qilib” sozlanadigan ikki CSS effekti. Bu generator ikkalasiga ham katta jonli koʻrinishli vizual muharrir beradi, soʻng aniq CSS eʼlonini va bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)] kabi mos Tailwind arbitrary-value klassini yozadi — natijani toʻgʻridan-toʻgʻri stil fayliga yoki className ga joylashingiz mumkin.
Gradiyent muharriri chiziqli, radial va konussimon gradiyentlar yaratadi. Bosgan joyingizga rang qoʻshish uchun nuqtalar chizigʻini bosing, nuqtani surish uchun torting yoki aniq oʻrin uchun strelka tugmalaridan foydalaning, har bir nuqtaga alohida shaffoflik bering. Chiziqli va konussimon gradiyentlar burchak, radial va konussimonlar markaz nuqtasi, radial gradiyent esa doira yoki ellips shaklini oladi; ularning istalgani chiziq va halqalar uchun takrorlanishi mumkin. Aralashtirish uchun rang fazosini ham tanlaysiz: OKLab va OKLCH toʻyingan ranglar orasida klassik sRGB beradigan kulrang, xira oʻrta qismning oldini oladi va barcha zamonaviy brauzerlarda ishlaydi.
Box-shadow muharriri kerakli qancha qatlam boʻlsa, shuncha qatlamni ustma-ust qoʻyadi. Har bir qatlamda X va Y siljishi, xiralik, yoyilish, shaffoflikli rang, inset tugmasi va koʻrinishni yoqib-oʻchirish bor; qatlamlar tartibini oʻzgartirish mumkin, chunki birinchisi eng ustda chiziladi. Oʻlchami, burchak radiusi va ranglari sozlanadigan namunaviy blok effektni yorugʻ yoki qorongʻi fonda koʻrsatadi.
Har bir muharrir uchun oʻn ikkitadan tayyor namuna — quyosh botishi, rang gʻildiragi va chiziqlar; Material balandlik darajalari, qatlamli yumshoq soyalar, neomorfizm va qattiq siljishlar — boshlash uchun asos boʻladi. Vosita faqat gradiyent va box-shadow bilan ishlaydi: text-shadow, filter: drop-shadow va SVG gradiyentlari yaratilmaydi.
Maxfiylik
Hammasi sahifaning oʻzida bajariladi: ranglar va sozlamalar brauzeringizdan chiqmaydi, hech qanday rasm yuklanmaydi. Joriy gradiyent va soyangiz qaytib kelganingizda turishi uchun lokal xotirada saqlanadi.
Imkoniyatlar
Chiziqli, radial va konussimon
Shaffoflik, burchak, markaz, shakl va takrorlash rejimiga ega suriladigan rang nuqtalari.
Koʻp qatlamli soyalar
Real chuqurlik uchun soya qatlamlarini ustma-ust qoʻying, tartiblang, yashiring va ichkariga oling.
CSS va Tailwind
Tayyor eʼlonni yoki Tailwind arbitrary-value klassini nusxalang.