Негізгі мазмұнға өту
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 қозғалтқышы алдын ала қарауды өңдейді. Canvas немесе кескін қатыспайды — не көрсеңіз, ол дәлме-дәл қолданылатын CSS қасиеті.
  4. 4
    Төрт форматта көшіруге дайын шығыс
    Формат селекторы дәл сол градиент жолын жай CSS-ке (background: ...), тұрақты-резервпен CSS блогына, Tailwind еркін мән класына немесе SCSS айнымалы декларациясына түрлендіреді. "Көшіру"-ді басу таңдалған шығысты navigator.clipboard.writeText арқылы буферге жазады. Ағымдағы градиент сондай-ақ URL хэшінде кодталады, сондықтан оны бетбелгіге қосуға немесе бөлісуге болады.

Байланысты құралдар

🟦

CSS торы генераторы

CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған CSS және HTML-ді көшіріңіз.

Байқап көріңіз
↔️

CSS Flexbox генераторы

Ағы бағыты, оранды, біліктенді және түсінік өндіктерге әрекет жасаңыз — және CSS-ді көшіріңіз.

Байқап көріңіз
🧮

Матрица калькуляторы

Матрицаларды қосыңыз, азайтыңыз, көбейтіңіз, транспонирлеңіз, инверсиялаңыз және жеңілдетіңіз, сондай-ақ анықтауыш, ранг, меншікті мәндер және Ax = b шешімі — 8×8 дейін, бір түртумен көшіру. Тегін және құпия.

Байқап көріңіз

Жиі қойылатын сұрақтар