Дизайн

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

Візуально створювати CSS-градієнти.

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

Виберіть готовий пресет або створіть з нуля: додайте кольорові точки, перетягуйте позиції, перемикайте лінійний / радіальний / конічний. Копіюйте CSS або фрагмент класу Tailwind.

Поширені запитання

Які типи градієнтів підтримуються?

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

Як використовувати CSS?

Скопіюйте створений рядок background у таблицю стилів або вставте його в довільне значення Tailwind, наприклад bg-[linear-gradient(...)].

Чи можна почати з пресета?

Так — виберіть будь-який із 12 пресетів (захід сонця, океан, радіальний прожектор, конічна веселка та інші), а потім налаштуйте колірні точки й кути.

Останнє оновлення: