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

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

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

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

Як користуватися

Виберіть тип градієнта та кут або положення.
Додайте або відредагуйте кольорові зупинки.
Скопіюйте згенерований CSS.

How this tool works

Виберіть тип градієнта та кут або положення.
Додайте або відредагуйте кольорові зупинки.
Скопіюйте згенерований CSS.

Recommended settings

Спочатку скористайтеся параметрами за замовчуванням, а потім відкоригуйте, якщо потрібно

Supported formats

Text / on-page input

File size and limits

Дуже складні багатошарові попередні перегляди можуть працювати повільніше на старих телефонах.

Privacy

Генератори кольорів і CSS повністю працюють у вашому браузері. Попередній перегляд і конверсія ніколи не завантажують ваші стилі.

Common use cases

Використовуйте CSS Gradient Generator, коли вам потрібно: створюйте лінійні, радіальні та конічні градієнти за допомогою попереднього перегляду в реальному часі та CSS, готового до копіювання.

Troubleshooting

Після вставлення попередній перегляд виглядає інакше

Перевірте наявність конкуруючих CSS на вашій сторінці (скидання, успадковані кольори). Спершу скопіюйте згенероване правило в ізольовану таблицю стилів.

FAQ

Це завантажує мій CSS?

Ні. Генератори та конвертери працюють у вашому браузері з попереднім переглядом.

Чи потрібен мені обліковий запис?

Ні. Відкрийте інструмент, налаштуйте елементи керування та скопіюйте CSS.