Генератор на CSS градиент

Како да го користите генераторот на CSS градиент

1. Изберете Тип на градиент: Линеарен, Радијален или Конусен. Големиот преглед горе се освежува со секоја промена.
2. За линеарен градиент подесете го Агол со лизгачот или внесете го во степени (90° оди од лево кон десно, 180° од горе кон долу). За конусен градиент, аголот е местото каде почнува завртувањето.
3. За радијални и конусни градиенти поместете го центарот со Центар X и Центар Y. Радијалниот градиент може да биде Круг или Елипса (менито Облик).
4. Уредете ги Точки на боја. Кликнете каде било на лентата за да додадете точка таму со бојата што градиентот веќе ја има на таа позиција или користете Додај точка за да го пополните најшироката празнина. Повлечете рачка за да ја поместите. Секоја точка има и ред во кој можете да изберете боја, да внесете која било CSS боја, да подесите Позиција (%) или да ја Отстрани (градиентот задржува најмалку две точки).
5. По избор штиклирајте Повторувачки, изберете Интерполација на бои, кликнете Обрни за да ги превртите точките или Случаен градиент за инспирација.
6. Копирајте го резултатот од CSS код со Копирај.

Тастатура: фокусирајте рачка на лентата, па користете ги стрелките за да ја поместите за 1 % (10 % со Shift), Home и End за скок до краевите и Delete за да ја отстраните.

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Трите функции за градиент

• linear-gradient() ги меша боите по права линија. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) оди од индиго на левата страна до розова на десната. Аглите се во правец на стрелките на часовникот од врвот: 0deg покажува нагоре, 90deg надесно.
• radial-gradient() зрачи од централна точка. radial-gradient(circle at 30% 40%, …) го става центарот на 30 % од левата и 40 % од горната страна. Елипсата се протега со кутијата, кругот останува кружен.
• conic-gradient() се врти околу центарот како стрелките на часовник. conic-gradient(from 0deg at 50% 50%, …) прави тркала на бои, кружни графикони и ефекти на вртење. Позициите на точките се делови од целиот круг.

Опцијата Повторувачки користи repeating-linear-gradient() и сродните функции: шаблонот дефиниран од вашите точки се повторува додека не се исполни кутијата. Ставете ја последната точка далеку под 100 % (на пример 20 %) за да видите ленти или прстени.

Две точки на иста позиција создаваат остар раб наместо мешање, така се прават ленти и знамиња. Генераторот ги задржува точките сортирани по позиција во кодот, како што бара CSS.

sRGB или OKLCH интерполација

Прелистувачите стандардно ги мешаат боите на градиентот во sRGB. Меѓу две заситени бои, како сина и жолта, тоа често создава досадна сива или матна средина. CSS Color Level 4 овозможува избор на просторот за интерполација: linear-gradient(90deg in oklch, …) меша во перцептивниот простор OKLCH и ја задржува средината живописна.

Со OKLCH (поблаг, со sRGB резервна варијанта) алатката запишува две декларации background: прво класичната sRGB верзија, потоа OKLCH верзијата. Прелистувачите што поддржуваат простори за интерполација (Chrome и Edge 111+, Safari 16.2+, Firefox 127+) го користат вториот ред; постарите го игнорираат и го задржуваат првиот.

Совети

• Боите со провидност се прифаќаат во полињата за точки, на пример #00000080 или rgb(0 0 0 / 50%), што е практично за преклопувања врз слики.
• Кодот е напишан со background. Користете background-image ако другите својства на позадината ги поставувате одделно.
• Суптилните градиенти (две блиски нијанси на една боја) обично изгледаат професионално од дугини мешања.