Генератор градієнтів

Створюй плавні CSS-градієнти з живим превʼю

← На головну
Швидкі кути

Затисни точки і перетягни стоп вище або нижче. Код градієнта оновиться під новий порядок.

%
%

Експорт коду

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Фірмова підбірка

Готові градієнти

Підхоплюй ці мікси й одразу змінюй під свої задачі

Aurora North

linear

Candy Glass

linear

Sunset Punch

linear

Hologram Flow

conic

Mojito Lime

radial

Infrared Beam

linear

Ultraviolet

linear

Lagoon Mist

linear

Nebula Bloom

conic

Deep Sea

linear

Velvet Night

radial

Sahara Heat

linear

Tropical Punch

conic

Forest Mist

linear

Polar Light

radial

Cinematic Dusk

linear

Iris Beam

conic

Lava Flow

linear

Ice & Fire

linear

Noir Glow

radial

Cobalt Circuit

linear

Plasma Ring

conic

Sandstorm

linear

Mint Soda

radial

Neon Punch

linear

Amber Glass

linear

Zenith

linear

Electric Horizon

conic

Orchid Fade

linear

Retro Wave

linear

Line Night

radial

Ніколи не втрачайте свої ідеальні дизайни

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

Необмежена кількість збережень
Доступ з будь-якого пристрою
Експорт у будь-який час

Можливості генератора CSS градієнтів

  • Лінійні градієнти — Створюйте плавні переходи кольорів у будь-якому напрямку. Підтримка всіх кутів від 0° до 360° для повного контролю над напрямком градієнта.
  • Радіальні градієнти — Круглі та еліптичні градієнти з можливістю налаштування позиції центру, форми та розміру розповсюдження.
  • Множинні кольорові точки — Додавайте необмежену кількість кольорів до вашого градієнта. Точно контролюйте позицію кожної кольорової точки для складних ефектів.
  • Живе превʼю — Бачте результат у реальному часі під час редагування. Миттєвий відгук на всі зміни кольорів, позицій та параметрів.
  • Готові пресети — Колекція красивих готових градієнтів для швидкого старту. Використовуйте як є або налаштуйте під свої потреби.
  • Експорт CSS коду — Копіюйте готовий CSS код одним кліком. Підтримка синтаксису для всіх сучасних браузерів з автоматичними префіксами.

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

  1. Виберіть тип градієнта: лінійний або радіальний
  2. Додайте кольори за допомогою палітри або введіть HEX/RGB коди
  3. Налаштуйте позиції кольорових точок перетягуванням або числовим введенням
  4. Для лінійних градієнтів встановіть потрібний кут повороту
  5. Перегляньте результат у реальному часі на екрані превʼю
  6. Скопіюйте згенерований CSS код та використовуйте у вашому проекті

Чому варто використовувати CSS градієнти

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

Часті питання про CSS градієнти

Так, сучасні версії всіх популярних браузерів (Chrome, Firefox, Safari, Edge) повністю підтримують CSS градієнти. Для старіших версій може знадобитися використання вендорних префіксів.
Технічно немає обмеження на кількість кольорових точок у градієнті. Однак для оптимальної продуктивності рекомендується використовувати 2-5 кольорів.
Так, градієнти повністю підтримують прозорість через RGBA або HSLA кольори. Це дозволяє створювати ефекти поступового зникнення.
Для діагонального градієнта використовуйте лінійний тип та встановіть кут 45°, 135°, 225° або 315° в залежності від потрібного напрямку.