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

Генерирајте код за CSS градиент со преглед, само со избор на бои и агол

Информации за ажурирањеДодаден CSS генератор на градиенти — изберете бои и агол за да се генерира кодотПреглед на ажурирања

Карактеристики

Прегледот и кодот се ажурираат заедно

При секоја промена на бојата или аголот, изгледот и CSS се менуваат истовремено

Линеарен, радијален и конусен

Детално задавање на агол, форма и централна позиција за секој вид

До 10 бои со влечење

Позицијата на бојата се менува со влечење по лентата, а проѕирноста со лизгач

8 примероци и случајно генерирање

Фино прилагодување врз основа на класични или случајни комбинации на бои

Како се користи

Изберете вид

Изберете го видот на градиентот: линеарен, радијален или конусен

Одредете ги боите

Изберете боја преку код или примерок, додајте бои со „Додај боја“ и прилагодете ја позицијата и проѕирноста

Прилагодете ја насоката

За линеарен користете агол или копчиња за насока, а за радијален и конусен задајте централна позиција

Копирајте го кодот

Со копчето „Копирај“ залепете го едноредниот CSS во вашиот стил

Примери на употреба

Создавање позадина за херо-слика

Одредете ја позадинската боја на насловната секција или копчињата без пишување код

Избор на бои за наслови на блог

Изберете блиска комбинација од примероците и подредете ја позадината на насловите

Преклоп врз фотографија

Создајте полупроѕирен слој врз фотографијата со боја со намалена проѕирност

Прилагодување на повеќебоен градиент

Постепено доближувајте ги границите меѓу три или повеќе бои со влечење

Основни поими

Разлика меѓу linear, radial и conic

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

linear-gradient：linear-gradient е линеарен градиент кај кој боите се менуваат по права линија под зададен агол.
radial-gradient：radial-gradient е радијален градиент кај кој боите се шират од централната позиција нанадвор во форма на круг или елипса.
conic-gradient：conic-gradient е конусен градиент кај кој боите се менуваат додека се врти цел круг во насока на стрелките на часовникот околу централната позиција.

Поврзаност меѓу аголот и клучните зборови за насока

Кај linear-gradient аголот 0deg е насока од долу нагоре, а со зголемување на вредноста ротира во насока на стрелките на часовникот. Аголот може да се запише и со клучен збор за насока како „to right“, при што 90deg одговара на „to right“, а 180deg на „to bottom“.

Запишување на точките на застанување и проѕирноста

Точка на застанување на бојата (color stop) е позицијата во градиентот на која се појавува таа боја, при што 0% е почетокот, а 100% крајот. На пример, „#3B82F6 0%, #8B5CF6 100%“ значи промена од сина на почетокот кон виолетова на крајот.

Формат #RRGGBB：Форматот #RRGGBB е запис на бојата во кој јачината на црвената, зелената и сината се претставува со по две хексадецимални цифри, па #FF0000 е непроѕирна црвена.
Формат rgba：Форматот rgba е запис на бојата во кој на вредностите за црвена, зелена и сина (0–255) се додава проѕирност (0–1), па проѕирност 0.5 означува полупроѕирна боја.