Перайсці да асноўнага зместу
LibraTool logoLibraTool

Генератар CSS-градыентаў — бясплатна

Стварайце лінейныя, радыяльныя і конусападобныя CSS-градыенты з жывым прагляданнем. Капіруйце CSS адным кліком.

Працуе афлайн пасля загрузкі
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Пазбягае шэрых сярэдзін паміж вельмі рознымі колерамі. Дадае звычайны радок sRGB як запасны варыянт для старых браўзераў.

0%
100%

Шаблоны

Тыповыя выкарыстанні

  • Стварыце градыенты для героўскіх секцыіРазрабіце фонавыя градыенты на ўсю старонку для адзінак героў вэбсайта і лендзінг-старонак.
  • Стварыце кнопкі з градыентамі і CTAРазрабіце прыметныя фонавыя градыенты кнопак для выклікаў да дзеяння, якія вылучаюцца.
  • Стварыце фонавыя градыенты для карточакРазрабіце градыентныя запаўненні для карточак, мадаліў, бакавых панеляў і фонаў кампанентаў UI.
  • Стварыце градыенты для графікі сацсетаўРазрабіце яркія фонавыя градыенты для публікацыяў Instagram, мініяцюраў YouTube і карточак Twitter.
  • Стварыце вагаванні колераў для дыяграмаўСтварыце вагаванні колераў на аснове градыентаў для тепловых карт, паласаў прагрэсу і дадзеных візуалізацыяў.

Як гэта працуе

Генератар градыентаў будуе радкі 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 браўзера рэндэрыць папярэдні прагляд. Тут не задзейнічаны ні канвас, ні малюнак — тое, што вы бачыце, літаральна з'яўляецца прыменянай уласцівасцю CSS.
  4. 4
    Гатовы да капіравання вывад у чатырох фарматах
    Селектар фармату пераводзіць той жа радок градыенту ў просты CSS (background: ...), блок CSS з суцэльным запасным варыянтам, клас адвольнага значэння Tailwind, ці дэкларацыю зменнай SCSS. Націск на Капіяваць запісвае абраны вывад у буфер абмену праз navigator.clipboard.writeText. Бягучы градыент таксама кадуецца ў хэш URL, так што вы можаце захаваць яго ў закладкі ці падзяліцца ім.

Звязаныя інструменты

🟦

Генератар CSS Grid

Візуальна праектуйце CSS grid — трэкі, адзінкі і промежкі — і капіюйце створаныя CSS і HTML.

Паспрабуйце
↔️

Генератар CSS Flexbox

Эксперыментуйце з напрамкам flex, пераносам, justify і align пры жывых элементах — і скапіюйце CSS.

Паспрабуйце
🧮

Калькулятар матрыц

Складанне, аднімання, множанне, транспаніраванне, абарачэнне і прывядзенне матрыц, плюс вызначальнік, ранг, уласныя значэнні і рашэнне Ax = b — да 8×8, з капіраваннем адным націскам. Бясплатна і прыватна.

Паспрабуйце

Часта задаюць пытанні