CSS градиент және көлеңке генераторы құралын қалай қолдану керек
- 1
Градиент немесе көлеңкені таңдаңыз
Екі редактор арасында алдын ала қарау үстіндегі қойындылар арқылы ауысыңыз.
- 2
Дайын үлгіден бастаңыз
Жүктеу үшін дайын үлгі тақтасын басыңыз немесе әдепкі мәнді қалдырып, одан әрі реттеңіз.
- 3
Көрнекі түрде реттеңіз
Түс нүктелерін сүйреп, бұрышты орнатыңыз немесе көлеңке қабаттарын қосып, ығысу, бұлдырлау және жайылуды реттеңіз.
- 4
Кодты көшіріңіз
CSS декларациясын немесе Tailwind класын көшіріп, жобаңызға қойыңыз.
Шектеулер және Pro
Тіркелусіз тегін: түс нүктелері мен көлеңке қабаттары шектеусіз, градиенттің 3 түрі, түстерді араластырудың 3 кеңістігі және 24 дайын үлгі.
Pro жарнаманы өшіреді; екі редактор да кез келген тарифте толық жұмыс істейді. Pro-ны қарау
CSS градиент және көлеңке генераторы туралы
Градиент пен көлеңке — браузердің әзірлеуші құралдарында көбіне сынап көру арқылы реттелетін екі CSS эффектісі. Бұл генератор әрқайсысы үшін үлкен тікелей алдын ала қарауы бар көрнекі редактор ұсынады, содан кейін дәл CSS декларациясын және сәйкес Tailwind arbitrary-value классын жазады, мысалы bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]. Нәтижені стильдер кестесіне немесе className ішіне бірден қоя аласыз.
Градиент редакторы сызықтық, радиалды және конустық градиенттерді жасайды. Түс қосу үшін түс жолағын басыңыз, тоқтау нүктесін сүйреп жылжытыңыз немесе нақты орын үшін бағыт пернелерін қолданыңыз, әр нүктеге жеке мөлдірсіздік беріңіз. Сызықтық және конустық градиенттер бұрышты, радиалды және конустық градиенттер орталық нүктені, радиалды градиенттер шеңбер немесе эллипс пішінін қабылдайды, ал кез келгенін жолақтар мен сақиналар үшін қайталауға болады. Сондай-ақ араластыруға арналған түс кеңістігін таңдай аласыз: OKLab және OKLCH қанық түстер арасында классикалық sRGB араластыруы беретін сұр, лайлы ортаны болдырмайды және барлық қазіргі браузерлерде қолдау табады.
Бокс-көлеңке редакторы қажетті қабат санын жинақтайды. Әр қабатта X және Y ығысуы, бұлдырлау, жайылу, мөлдірсіздігі бар түс, ішкі қосқыш және көрінуді қосқыш бар. Бірінші қабат үстіне салынатындықтан, қабаттардың ретін өзгертуге болады. Өлшемі, бұрыш радиусы және түстері реттелетін қорап эффектіні ашық немесе қараңғы бетте көрсетеді.
Әр редактор үшін он екі дайын үлгі — күн батуы, түс дөңгелектері мен жолақтар; Material биіктіктері, көп қабатты жұмсақ көлеңкелер, неоморфизм және қатты ығысулар — бастау нүктесін береді. Құрал тек градиент пен box-shadow жасайды; text-shadow, filter: drop-shadow және SVG градиенттері жасалмайды.
Құпиялылық
Барлығы беттің ішінде орындалады: түстер мен баптаулар браузеріңізден шықпайды, ешқандай сурет серверге жүктелмейді. Ағымдағы градиент пен көлеңке жергілікті сақтауда сақталады, сондықтан қайта оралғанда да тұрады.
Мүмкіндіктер
Сызықтық, радиалды және конустық
Мөлдірсіздігі бар сүйрелетін түс нүктелері, бұрыш, орталық, пішін және қайталау режимі.
Көп қабатты көлеңкелер
Шынайы тереңдік үшін көлеңке қабаттарын жинақтаңыз, ретін өзгертіңіз, жасырыңыз және ішкі етіңіз.
CSS және Tailwind
Дайын декларацияны немесе Tailwind arbitrary-value класын көшіріңіз.