BrowserFun
Нові ігриУсі ігри
  • Головна
  • Нові ігри
  • Ігри
BrowserFun

Безкоштовні навчальні ігри для кожного класу.

Категорії

  • Математика
  • English Language Arts
  • Social Studies
  • Technology
  • Наука & Природа

Огляд

  • Усі ігри
  • Нові ігри
  • Усі категорії

Правова інформація

  • Політика конфіденційності
  • Умови та положення
  • Політика використання файлів cookie
  • Відмова від відповідальності

© 2026 BrowserFun. Всі права захищені.

  1. Головна
  3. Інструменти
  5. Популярна бібліотека кольорових градієнтів

Популярна бібліотека кольорових градієнтів

Досліджуйте нашу підібрану колекцію з понад 100 приголомшливих кольорових градієнтів. Клацніть зразки градієнтів, щоб переглянути окремі кольори, миттєво скопіювати CSS-код і знайти ідеальні градієнтні комбінації для ваших дизайнів.

toolКолірУсі віки

Кольорові Градієнти

Sunset

#ff7e5f → #feb47b

Натисніть, щоб скопіювати градієнт

Cool Blues

#2193b0 → #6dd5ed

Натисніть, щоб скопіювати градієнт

Purple Dream

#cc2b5e → #753a88

Натисніть, щоб скопіювати градієнт

Aqua Marine

#1a2980 → #26d0ce

Натисніть, щоб скопіювати градієнт

Fresh Turboscent

#f1f2b5 → #135058

Натисніть, щоб скопіювати градієнт

Moonlit Asteroid

#0F2027 → #203A43 → #2C5364

Натисніть, щоб скопіювати градієнт

Crimson Tide

#642B73 → #C6426E

Натисніть, щоб скопіювати градієнт

Winter Neva

#a1c4fd → #c2e9fb

Натисніть, щоб скопіювати градієнт

Emerald Water

#348F50 → #56B4D3

Натисніть, щоб скопіювати градієнт

Lemon Twist

#F7971E → #FFD200

Натисніть, щоб скопіювати градієнт

Mauve

#42275a → #734b6d

Натисніть, щоб скопіювати градієнт

Royal Blue

#536976 → #292E49

Натисніть, щоб скопіювати градієнт

Deep Sea Space

#2C3E50 → #4CA1AF

Натисніть, щоб скопіювати градієнт

Scooter

#36D1DC → #5B86E5

Натисніть, щоб скопіювати градієнт

Celestial

#C33764 → #1D2671

Натисніть, щоб скопіювати градієнт

Roseanna

#FFAFBD → #ffc3a0

Натисніть, щоб скопіювати градієнт

Honey Dew

#43C6AC → #F8FFAE

Натисніть, щоб скопіювати градієнт

Juicy Orange

#FF8008 → #FFC837

Натисніть, щоб скопіювати градієнт

Mirage

#16222A → #3A6073

Натисніть, щоб скопіювати градієнт

Steel Gray

#1F1C2C → #928DAB

Натисніть, щоб скопіювати градієнт

Kashmir

#614385 → #516395

Натисніть, щоб скопіювати градієнт

Electric Violet

#4776E6 → #8E54E9

Натисніть, щоб скопіювати градієнт

Venice Blue

#085078 → #85D8CE

Натисніть, щоб скопіювати градієнт

Bora Bora

#2BC0E4 → #EAECC6

Натисніть, щоб скопіювати градієнт

Moss

#134E5E → #71B280

Натисніть, щоб скопіювати градієнт

Shroom Haze

#5C258D → #4389A2

Натисніть, щоб скопіювати градієнт

Mystic

#757F9A → #D7DDE8

Натисніть, щоб скопіювати градієнт

Midnight City

#232526 → #414345

Натисніть, щоб скопіювати градієнт

Sea Blizz

#1CD8D2 → #93EDC7

Натисніть, щоб скопіювати градієнт

Opa

#3D7EAA → #FFE47A

Натисніть, щоб скопіювати градієнт

Titanium

#283048 → #859398

Натисніть, щоб скопіювати градієнт

Mantle

#24C6DC → #514A9D

Натисніть, щоб скопіювати градієнт

Dracula

#DC2424 → #4A569D

Натисніть, щоб скопіювати градієнт

Peach

#ED4264 → #FFEDBC

Натисніть, щоб скопіювати градієнт

Moonrise

#DAE2F8 → #D6A4A4

Натисніть, щоб скопіювати градієнт

Clouds

#ECE9E6 → #FFFFFF

Натисніть, щоб скопіювати градієнт

Stellar

#7474BF → #348AC7

Натисніть, щоб скопіювати градієнт

Bourbon

#EC6F66 → #F3A183

Натисніть, щоб скопіювати градієнт

Calm Darya

#5f2c82 → #49a09d

Натисніть, щоб скопіювати градієнт

Influenza

#C04848 → #480048

Натисніть, щоб скопіювати градієнт

Shrimpy

#e43a15 → #e65245

Натисніть, щоб скопіювати градієнт

Army

#414d0b → #727a17

Натисніть, щоб скопіювати градієнт

Miaka

#FC354C → #0ABFBC

Натисніть, щоб скопіювати градієнт

Pinot Noir

#4b6cb7 → #182848

Натисніть, щоб скопіювати градієнт

Day Tripper

#f857a6 → #ff5858

Натисніть, щоб скопіювати градієнт

Namn

#a73737 → #7a2828

Натисніть, щоб скопіювати градієнт

Blurry Beach

#d53369 → #cbad6d

Натисніть, щоб скопіювати градієнт

Vasily

#e9d362 → #333333

Натисніть, щоб скопіювати градієнт

A Lost Memory

#DE6262 → #FFB88C

Натисніть, щоб скопіювати градієнт

Petrichor

#666600 → #999966

Натисніть, щоб скопіювати градієнт

Jonquil

#FFEEEE → #DDEFBB

Натисніть, щоб скопіювати градієнт

Sirius Tamed

#EFEFBB → #D4D3DD

Натисніть, щоб скопіювати градієнт

Kyoto

#c21500 → #ffc500

Натисніть, щоб скопіювати градієнт

Misty Meadow

#215f00 → #e4e4d9

Натисніть, щоб скопіювати градієнт

Aqualicious

#50C9C3 → #96DEDA

Натисніть, щоб скопіювати градієнт

Moor

#616161 → #9bc5c3

Натисніть, щоб скопіювати градієнт

Almost

#ddd6f3 → #faaca8

Натисніть, щоб скопіювати градієнт

Forever Lost

#5D4157 → #A8CABA

Натисніть, щоб скопіювати градієнт

Winter

#E6DADA → #274046

Натисніть, щоб скопіювати градієнт

Autumn

#DAD299 → #B0DAB9

Натисніть, щоб скопіювати градієнт

Candy

#D3959B → #BFE6BA

Натисніть, щоб скопіювати градієнт

Reef

#00d2ff → #3a7bd5

Натисніть, щоб скопіювати градієнт

The Strain

#870000 → #190A05

Натисніть, щоб скопіювати градієнт

Dirty Fog

#B993D6 → #8CA6DB

Натисніть, щоб скопіювати градієнт

Earthly

#649173 → #DBD5A4

Натисніть, щоб скопіювати градієнт

Virgin

#C9FFBF → #FFAFBD

Натисніть, щоб скопіювати градієнт

Ash

#606c88 → #3f4c6b

Натисніть, щоб скопіювати градієнт

Shadow Night

#000000 → #53346D

Натисніть, щоб скопіювати градієнт

Cherryblossoms

#FBD3E9 → #BB377D

Натисніть, щоб скопіювати градієнт

Parklife

#ADD100 → #7B920A

Натисніть, щоб скопіювати градієнт

Dance To Forget

#FF4E50 → #F9D423

Натисніть, щоб скопіювати градієнт

Starfall

#F0C27B → #4B1248

Натисніть, щоб скопіювати градієнт

Red Mist

#000000 → #e74c3c

Натисніть, щоб скопіювати градієнт

Teal Love

#AAFFA9 → #11FFBD

Натисніть, щоб скопіювати градієнт

Neon Life

#B3FFAB → #12FFF7

Натисніть, щоб скопіювати градієнт

Man of Steel

#780206 → #061161

Натисніть, щоб скопіювати градієнт

Amethyst

#9D50BB → #6E48AA

Натисніть, щоб скопіювати градієнт

Cheer Up Emo Kid

#556270 → #FF6B6B

Натисніть, щоб скопіювати градієнт

Shore

#70e1f5 → #ffd194

Натисніть, щоб скопіювати градієнт

Facebook Messenger

#00c6ff → #0072ff

Натисніть, щоб скопіювати градієнт

SoundCloud

#fe8c00 → #f83600

Натисніть, щоб скопіювати градієнт

Behongo

#52c234 → #061700

Натисніть, щоб скопіювати градієнт

ServQuick

#485563 → #29323c

Натисніть, щоб скопіювати градієнт

Friday

#83a4d4 → #b6fbff

Натисніть, щоб скопіювати градієнт

Martini

#FDFC47 → #24FE41

Натисніть, щоб скопіювати градієнт

Metallic Toad

#abbaab → #ffffff

Натисніть, щоб скопіювати градієнт

Between The Clouds

#73C8A9 → #373B44

Натисніть, щоб скопіювати градієнт

Crazy Orange I

#D38312 → #A83279

Натисніть, щоб скопіювати градієнт

Hersheys

#1e130c → #9a8478

Натисніть, щоб скопіювати градієнт

Talking To Mice Elf

#948E99 → #2E1437

Натисніть, щоб скопіювати градієнт

Purple Bliss

#360033 → #0b8793

Натисніть, щоб скопіювати градієнт

Predawn

#FFA17F → #00223E

Натисніть, щоб скопіювати градієнт

Endless River

#43cea2 → #185a9d

Натисніть, щоб скопіювати градієнт

Pastel Orange at the Sun

#ffb347 → #ffcc33

Натисніть, щоб скопіювати градієнт

Twitch

#6441A5 → #2a0845

Натисніть, щоб скопіювати градієнт

Atlas

#FEAC5E → #C779D0 → #4BC0C8

Натисніть, щоб скопіювати градієнт

Instagram

#833ab4 → #fd1d1d → #fcb045

Натисніть, щоб скопіювати градієнт

Flickr

#ff0084 → #33001b

Натисніть, щоб скопіювати градієнт

Vine

#00bf8f → #001510

Натисніть, щоб скопіювати градієнт

Turquoise flow

#136a8a → #267871

Натисніть, щоб скопіювати градієнт

Portrait

#8e9eab → #eef2f3

Натисніть, щоб скопіювати градієнт

Virgin America

#7b4397 → #dc2430

Натисніть, щоб скопіювати градієнт

Koko Caramel

#D1913C → #FFD194

Натисніть, щоб скопіювати градієнт

Fresh Turboscent

#F1F2B5 → #135058

Натисніть, щоб скопіювати градієнт

Green to dark

#6A9113 → #141517

Натисніть, щоб скопіювати градієнт

Ukraine

#004FF9 → #FFF94C

Натисніть, щоб скопіювати градієнт

Curiosity blue

#525252 → #3d72b4

Натисніть, щоб скопіювати градієнт

Dark Knight

#BA8B02 → #181818

Натисніть, щоб скопіювати градієнт

Piglet

#ee9ca7 → #ffdde1

Натисніть, щоб скопіювати градієнт

Lizard

#304352 → #d7d2cc

Натисніть, щоб скопіювати градієнт

Sage Persuasion

#CCCCB2 → #757519

Натисніть, щоб скопіювати градієнт

Between Night and Day

#2c3e50 → #3498db

Натисніть, щоб скопіювати градієнт

Timber

#fc00ff → #00dbde

Натисніть, щоб скопіювати градієнт

Passion

#e53935 → #e35d5b

Натисніть, щоб скопіювати градієнт

Clear Sky

#005C97 → #363795

Натисніть, щоб скопіювати градієнт

Master Card

#f46b45 → #eea849

Натисніть, щоб скопіювати градієнт

Back To Earth

#00C9FF → #92FE9D

Натисніть, щоб скопіювати градієнт

Deep Purple

#673AB7 → #512DA8

Натисніть, щоб скопіювати градієнт

Little Leaf

#76b852 → #8DC26F

Натисніть, щоб скопіювати градієнт

Netflix

#8E0E00 → #1F1C18

Натисніть, щоб скопіювати градієнт

Light Orange

#FFB75E → #ED8F03

Натисніть, щоб скопіювати градієнт

Green Beach

#02AAB0 → #00CDAC

Натисніть, щоб скопіювати градієнт

Intuitive Purple

#DA22FF → #9733EE

Натисніть, щоб скопіювати градієнт

Emerald Water

#348F50 → #56B4D3

Натисніть, щоб скопіювати градієнт

Як користуватися бібліотекою градієнтів

  1. 1

    Переглядайте колекцію градієнтів

    Прокручуйте сітку зразків градієнтів, щоб досліджувати різні комбінації кольорів та стилі. Кожен градієнт відображає свою назву та коди кольорів.

  2. 2

    Переглядайте окремі кольори

    Клацніть на ліву половину градієнта, щоб побачити початковий колір, або клацніть на праву половину, щоб переглянути кінцевий колір. HEX-код буде відображатися протягом 2 секунд.

  3. 3

    Копіюйте CSS градієнта

    Натисніть кнопку 'Клацніть, щоб скопіювати градієнт' під будь-яким градієнтом, щоб скопіювати повну властивість CSS background до буфера обміну.

  4. 4

    Використовуйте у своєму проекті

    Вставте скопійований CSS-код у ваш файл стилів або вбудовані стилі. Градієнт готовий до використання у форматі linear-gradient.

Ключові особливості

  • 100+ підібраних градієнтів

    Отримайте доступ до ретельно відібраної колекції з понад 100 красивих градієнтних комбінацій, організованих за стилем та кольоровою темою для зручного перегляду.

  • Інтерактивний попередній перегляд кольорів

    Клацніть на ліву або праву половину будь-якого зразка градієнта, щоб переглянути окремі початкові та кінцеві кольори з відображенням їх HEX-кодів.

  • Копіювання CSS в один клік

    Миттєво копіюйте готовий до використання CSS-код linear-gradient до буфера обміну одним кліком на кнопку копіювання.

  • Візуальна градієнтна сітка

    Переглядайте градієнти в чистому, сучасному сітковому макеті з чітко відображеними назвами градієнтів та кодами кольорів для швидкого довідкового використання.

Що таке кольорові градієнти?

Кольорові градієнти — це плавні переходи між двома або більше кольорами, що створюють візуально привабливе поєднання. У веб-дизайні CSS лінійні градієнти дозволяють створювати ці кольорові переходи, що рухаються у заданому напрямку. Наша бібліотека містить професійно підібрані градієнтні комбінації, які добре поєднуються між собою, заощаджуючи ваш час на пошук гармонійних кольорових переходів для фонів, кнопок, карток та інших елементів дизайну.

Чому варто використовувати нашу бібліотеку градієнтів?

  • 1

    Професійно підібрані

    Кожен градієнт у нашій колекції був ретельно відібраний за візуальною привабливістю та універсальністю дизайну, що гарантує високоякісні кольорові комбінації.

  • 2

    Готовий до використання CSS

    Отримайте миттєвий CSS-код, який працює одразу. Немає потреби вручну писати синтаксис градієнта або експериментувати зі значеннями кольорів.

  • 3

    Інтерактивний огляд кольорів

    Переглядайте окремі кольори градієнта, клацаючи на різні частини зразка, що дозволяє легко зрозуміти, які саме кольори використовуються.

  • 4

    Інструмент дизайну, що економить час

    Уникайте проб і помилок при створенні градієнтів з нуля. Швидко знайдіть ідеальний градієнт та негайно впровадьте його у свої проекти.

Часто задавані питання

Скільки градієнтів у бібліотеці?

Бібліотека містить понад 100 ретельно підібраних градієнтних комбінацій, що включають різні стилі – від тонких переходів до сміливих, яскравих сумішей, придатних для різних дизайнерських потреб.

Як переглянути окремі кольори градієнта?

Клацніть на ліву половину зразка градієнта, щоб переглянути початковий колір, або клацніть на праву половину, щоб побачити кінцевий колір. HEX-код відображатиметься на зразку протягом 2 секунд.

Який формат CSS копіюється?

Інструмент копіює повну властивість CSS background з linear-gradient, що йде зліва направо (напрямок 'to right'). Наприклад: background: linear-gradient(to right, #FF6B6B, #4ECDC4);

Чи можу я використовувати ці градієнти в комерційних цілях?

Так, усі градієнти в бібліотеці можна безкоштовно використовувати в особистих та комерційних проектах без обмежень. Кольорові градієнти не підлягають авторському праву.

Як застосувати градієнт на моєму веб-сайті?

Після копіювання CSS-коду, вставте його у ваш файл стилів або як вбудований стиль. Ви можете застосувати його до фону будь-якого елемента, такого як div, section, кнопки або картки.

Чи можу я змінити напрямок градієнта?

Так, після копіювання CSS ви можете змінити напрямок, модифікувавши частину 'to right' на інші значення, такі як 'to bottom', 'to top', '45deg' або будь-який кут, який ви віддаєте перевагу.

Схожі інструменти

toolAll →

3D 3MF Переглядач Онлайн

Переглядайте та досліджуйте 3MF (3D Manufacturing Format) файли безпосередньо у вашому браузері. Інтерактивний 3D переглядач з обертанням, масштабуванням, освітленням середовища та можливостями знімків екрана. Завантаження не потрібне.

3D GLB Переглядач Онлайн

Переглядайте та інспектуйте GLB 3D моделі онлайн безкоштовно. Завантажуйте GLB файли, обертайте моделі, змінюйте оточення, робіть знімки екрана та досліджуйте 3D анімації безпосередньо у вашому браузері.

Безкоштовний Генератор Колірних Градієнтних Палітр – Створюйте Чудові Колірні Палітри Онлайн

Створюйте приголомшливі колірні градієнти та генеруйте власні колірні палітри онлайн безкоштовно. Вибирайте початковий та кінцевий кольори, налаштовуйте розмір палітри та копіюйте CSS-код або окремі шістнадцяткові коди кольорів. Ідеально підходить для веб-дизайну, графічного дизайну та творчих проєктів.

Безкоштовний Додаток QR-кодів до PDF

Додавайте QR-коди до існуючих документів PDF онлайн безкоштовно. Генеруйте QR-коди для URL, тексту, vCard, Wi-Fi, соціальних мереж та багато іншого, а потім вбудовуйте їх у ваші файли PDF за допомогою перетягування для позиціонування.

Безкоштовний Калькулятор Жиру в Організмі

Розрахуйте свій відсоток жиру в організмі за допомогою нашого безкоштовного калькулятора, використовуючи метод ВМС США. Отримайте детальний аналіз складу тіла, оцінку здоров'я та рекомендації щодо фізичної форми на основі ваших вимірювань.

Безкоштовний Калькулятор Номерів Тижнів

Обчислюйте номери тижнів з дат або знаходьте дати за номерами тижнів. Підтримує як північноамериканську (початок тижня в неділю), так і ISO 8601 (початок тижня в понеділок) системи нумерації тижнів з інтерактивним переглядом календаря.

КолірAll →

Безкоштовний Генератор Колірних Градієнтних Палітр – Створюйте Чудові Колірні Палітри Онлайн

Створюйте приголомшливі колірні градієнти та генеруйте власні колірні палітри онлайн безкоштовно. Вибирайте початковий та кінцевий кольори, налаштовуйте розмір палітри та копіюйте CSS-код або окремі шістнадцяткові коди кольорів. Ідеально підходить для веб-дизайну, графічного дизайну та творчих проєктів.

Безкоштовний конвертер кольорів Hex у Pantone

Конвертуйте шістнадцяткові (hex) кольори у найближчі відповідники Pantone за допомогою нашого безкоштовного онлайн-інструменту. Він пропонує точне зіставлення кольорів за Delta E, дозволяє переглядати понад 40 популярних кольорів Pantone та миттєво порівнювати кольори. Ідеально підходить для дизайнерів, друкарів та фахівців з кольору.

Безкоштовний конвертер кольорів HSV в Pantone – Перетворіть кольори HSV на відповідники Pantone

Миттєво перетворюйте кольори HSV (Відтінок, Насиченість, Яскравість) на їх найближчі відповідники кольорів Pantone. Знайдіть ідеальний колір Pantone за допомогою нашого комплексного інструменту підбору кольорів, який пропонує візуальні порівняння та точну колористику.

Безкоштовний конвертер кольорів RGB в Pantone

Перетворюйте кольори RGB у їхні найближчі відповідності Pantone за допомогою нашого вдосконаленого алгоритму підбору кольорів. Переглядайте підібрані кольори Pantone, порівнюйте відмінності кольорів та отримуйте точні коди кольорів для дизайн-проектів.

Безкоштовний Онлайн Генератор Колірних Палітр

Генеруйте приголомшливі колірні палітри онлайн за допомогою нашого безкоштовного генератора. Створюйте гармонійні колірні схеми, використовуючи принципи теорії кольору або витягуйте кольори із зображень. Експортуйте у формати CSS, SCSS, Tailwind, JSON, PDF та PNG.

Безкоштовний онлайн-генератор CSS-градієнтів – Створюйте красиві кольорові градієнти

Створюйте приголомшливі лінійні та радіальні CSS-градієнти за допомогою нашого простого у використанні генератора градієнтів. Вибирайте кольори, напрямки та миттєво копіюйте CSS-код для своїх веб-проектів.

Усі вікиAll →

3D 3MF Переглядач Онлайн

Переглядайте та досліджуйте 3MF (3D Manufacturing Format) файли безпосередньо у вашому браузері. Інтерактивний 3D переглядач з обертанням, масштабуванням, освітленням середовища та можливостями знімків екрана. Завантаження не потрібне.

3D GLB Переглядач Онлайн

Переглядайте та інспектуйте GLB 3D моделі онлайн безкоштовно. Завантажуйте GLB файли, обертайте моделі, змінюйте оточення, робіть знімки екрана та досліджуйте 3D анімації безпосередньо у вашому браузері.

Безкоштовний Генератор Колірних Градієнтних Палітр – Створюйте Чудові Колірні Палітри Онлайн

Створюйте приголомшливі колірні градієнти та генеруйте власні колірні палітри онлайн безкоштовно. Вибирайте початковий та кінцевий кольори, налаштовуйте розмір палітри та копіюйте CSS-код або окремі шістнадцяткові коди кольорів. Ідеально підходить для веб-дизайну, графічного дизайну та творчих проєктів.

Безкоштовний Калькулятор Жиру в Організмі

Розрахуйте свій відсоток жиру в організмі за допомогою нашого безкоштовного калькулятора, використовуючи метод ВМС США. Отримайте детальний аналіз складу тіла, оцінку здоров'я та рекомендації щодо фізичної форми на основі ваших вимірювань.

Безкоштовний Калькулятор Номерів Тижнів

Обчислюйте номери тижнів з дат або знаходьте дати за номерами тижнів. Підтримує як північноамериканську (початок тижня в неділю), так і ISO 8601 (початок тижня в понеділок) системи нумерації тижнів з інтерактивним переглядом календаря.

Безкоштовний Калькулятор Розділення Рахунків за Продукти – Діліть Чеки та Квитанції за Покупки

Легко розділяйте рахунки за продукти та чеки за покупки між друзями, співмешканцями або членами родини. Відстежуйте окремі товари, розраховуйте податки та чайові, та експортуйте результати у CSV або JSON.