Бесплатен Генератор на CSS градиент

Како функционира

Генераторот на градиенти гради CSS низи за градиент директно во прелистувачот — без библиотека, без сервер, без прикачување. Рачно напишана функција ја составува точната синтакса linear-gradient, radial-gradient, или conic-gradient од вашите бојни точки и агол во реално време, потоа го форматира резултатот за кој и да е излезен формат што ќе го изберете.

1. 1
   Конфигурирајте точки и насока

   Поставувате помеѓу 2 и 6 бојни точки користејќи го природниот избирач на боја на прелистувачот, потоа ја позиционирате секоја точка долж оската 0–100% со лизгач на опсег. За линеарни и конусни градиенти исто така избирате агол (0–360°); за радијални градиенти ја избирате формата (елипса или круг) и клучниот збор за големина што контролира колку далеку се протега градиентот.
2. 2
   buildCss ја составува низата на градиентот

   При секоја промена, локална функција buildCss ги спојува вашите параметри во точниот CSS повик на функција — на пр. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Не е вклучена библиотека; низата се гради со обична JavaScript логика на шаблони и се спојува директно од низата точки.
3. 3
   Прегледот во живо се исцртува преку вграден стил

   Составената низа на градиентот се применува директно на div елемент како вграден позадински стил, така што сопствениот CSS механизам на прелистувачот го исцртува прегледот. Не е вклучен canvas или слика — она што го гледате е буквално CSS својството што се применува.
4. 4
   Готов за копирање излез во четири формати

   Избирач на формат ја трансформира истата низа на градиентот во обичен CSS (background: ...), CSS блок со заден план во еднобојна боја, Tailwind класа со произволна вредност, или SCSS декларација за променлива. Кликнувањето на „Копирај“ го запишува избраниот излез во клипбордот преку navigator.clipboard.writeText. Тековниот градиент исто така се кодира во хешот на URL-то така што можете да го обележите или споделите.

Поврзани алатки