Ключові моменти
- 01Усі три типи CSS градієнтів — лінійний, радіальний й конічний — підтримуються з живим перегляданням.
- 02Додайте до шести зупинок кольору, кожна з незалежною позицією й кольором.
- 03Вивід — це повна декларація фону, готова до вставляння у будь-яку таблицю стилів.
- 04Без реєстрації, без встановлення й нічого не завантажується — усе запускається у вашому браузері.
Чому використовувати візуальний генератор градієнтів?
Написання CSS градієнтів вручну стає нудним дуже швидко. Синтаксис читається після того, як ви його знаєте, але вибір точних позицій зупинок і кольорів без візуального перегляду перетворює просте рішення дизайну на метод спроб і помилок у DevTools. Генератор дозволяє вам бачити результат у реальному часі й експортувати чистий код у момент, коли це виглядає правильно.
Цей інструмент підтримує всі три сучасні типи градієнтів. Лінійний — це класичне спрямоване змішування, яке ви будете використовувати для фонів героїв і кнопок. Радіальний розширюється від точки — чудово підходить для ефектів прожекторів й віньєток. Конічний рухається навколо центру, що робить його найкращим для сегментів круглої діаграми, колірного колеса й індикаторів спінера. Почніть з одного з вбудованих попередніх встановлень (Lime Swiss, Sunset, Sky, Aurora) або проектуйте з нуля.
Як створити CSS градієнт
Весь процес займає менше хвилини.
- 01
Виберіть тип градієнту
Виберіть Лінійний, Радіальний або Конічний з селектора типу. Для лінійного також встановіть кут. Перегляд оновлюється миттєво.
- 02
Додавайте та розміщуйте зупинки кольору
Клацніть Додати зупинку, щоб вставити нову зупинку, а потім перетягніть її повзунок або введіть відсоток, щоб розмістити її. Підтримується до шести зупинок — зупинки автоматично переупорядковуються за позицією.
- 03
Виберіть колір кожної зупинки
Клацніть на зразок кольору, щоб відкрити системний вибір кольору, або введіть значення hex безпосередньо. Працюють обидва формати RGB і hex.
- 04
Переглядайте у реальному часі
Панель перегляду рендеризує ваш градієнт за допомогою рідного ядра градієнту браузера, тому результат точно збігається з тим, що CSS виробиватиме у виробництві.
- 05
Копіюйте декларацію CSS
Клацніть Копіювати, щоб отримати повну декларацію background: linear-gradient(...). Вставте її у таблицю стилів, компонент у стилі або довільне значення Tailwind як bg-[<value>].
Звичайні випадки використання градієнтів
Кожен тип градієнту блискуче переважає в іншому сценарії.
- 01Фони розділу героя — лінійний градієнт на 135° для сучасного діагонального змісту.
- 02Стани наведення кнопки — тонкий двозупинковий лінійний градієнт для глибини.
- 03Радіальний прожектор або віньєтка — темна прозора радіальна на наложенні зображення.
- 04Круглі діаграми й кільця прогресу — конічний градієнт з жорсткими зупинками.
- 05Перегляди селектора колірного колеса — повнопаритетний конічний градієнт.
- 06Текстові градієнти — застосуйте градієнт до фону, а потім використовуйте background-clip: text.
Працює повністю у вашому браузері
Генератор градієнтів працює на 100% на стороні клієнта — жодні дані не надсилаються жодному серверу. Перегляд рендеризується власним ядром CSS браузера, що означає, що те, що ви бачите, збігається з тим, що рендеризуватиме браузер будь-якого відвідувача з тим же CSS.
Одна практична примітка: поштові клієнти все ще мають нерівномірну підтримку CSS градієнтів. Якщо ви вставляєте згенерований CSS в HTML-шаблон електронної пошти, додайте запасний solid background-color перед декларацією градієнту, тоді одержувачі на старіших клієнтах бачитимуть щось розумне.
FAQ генератора CSS градієнтів
Яка різниця між лінійними, радіальними й конічними градієнтами?
Лінійні градієнти переходять по прямій лінії під даним кутом. Радіальні градієнти розширюються від центральної точки — корисні для висвітлення й ефектів прожекторів. Конічні градієнти охоплюють центр як стрілки годинника — ідеально для сегментів круглих діаграм і колірних колес.
Чи можу я використовувати це для проектів Tailwind CSS?
Так. Скопіюйте згенероване значення й використовуйте його як довільне значення Tailwind, наприклад: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind включить його у вихідну таблицю стилів.
Чи перегляд точно збігається з тим, що я буду бачити на живому сайті?
Так — перегляд рендеризується тим же ядром градієнту браузера, який рендеризуватиме ваш живий CSS, тому вивід точний до пікселя.
Чи можу я використовувати CSS градієнти в шаблонах електронної пошти?
Більшість поштових клієнтів надійно не підтримують CSS градієнти. Завжди додавайте solid background-color перед вашою декларацією градієнту як запасний варіант.
Чи існує обмеження на кількість зупинок кольору?
Генератор підтримує до шести зупинок. Для більшості проектів два-чотири достатньо; більше шести, як правило, зменшує ясність, а не додає багатства.