CSS Tools Генератор CSS-градієнтів
Створюйте лінійні, радіальні та конічні градієнти візуально й копіюйте чистий CSS. Накладайте кілька шарів, додавайте колірні точки з прозорістю та проводьте просто по перегляду, щоб змінити напрямок.
CSS-градієнт від бузкового до жовтого
Кожен градієнт може мати кілька шарів, і кожен шар має власний тип, кут і кольори. На виході чистий CSS без вендорних префіксів, його можна одразу вставити в проєкт. Посилання на сторінку зберігає ваш градієнт: ним можна поділитися або повернутися до нього пізніше.
Як користуватися генератором градієнтів
Оберіть тип градієнта
Для кожного шару оберіть лінійний, радіальний або конічний. Лінійний змішує кольори вздовж прямої, радіальний розходиться від центральної точки, конічний обертає кольори навколо центру.
Налаштуйте кольори й шари
Натисніть на колірну шкалу, щоб додати точку, перетягніть її, щоб змінити позицію, і задайте будь-який колір із прозорістю. Кнопка додавання шару кладе зверху ще один градієнт.
Перевірте результат на перегляді
Подивіться градієнт на шести фігурах: весь екран, квадрат, горизонтальний і вертикальний прямокутник, коло та зірка. Фон за фігурою теж можна змінити.
background: linear-gradient(90deg, #ee82ee 0%, #ffff00 100%);