Генератор CSS-градієнтів
Створюйте лінійні, радіальні та конічні CSS-градієнти з кількома опорними кольорами й копіюйте код.
background: —;
Усе працює у вашому браузері — без завантаження й реєстрації.
Про Генератор CSS-градієнтів
Генератор CSS-градієнтів створює лінійні, радіальні та конічні градієнти з повним візуальним контролем. Додавайте кольорові точки, клацаючи на смузі градієнта, перетягуйте їх, щоб змінити положення, і задавайте для кожної точки власний колір, прозорість і позицію. Лінійні градієнти отримують керування кутом; радіальні — форму (коло або еліпс) і позицію; конічні — початковий кут.
Попередній перегляд у реальному часі показує саме те, що відрендерить браузер, а кнопка випадкової генерації разом із набором дібраних пресетів стануть у пригоді, коли потрібна відправна точка, а не порожнє полотно. Точки можна вільно додавати й видаляти — градієнту потрібно щонайменше дві.
Коли результат вас влаштовує, скопіюйте саме значення градієнта або повне правило CSS. Генератор працює повністю у вашому браузері без завантаження на сервер і без реєстрації, що робить його зручним інструментом для кнопок, фонів героїв, рамок і текстових ефектів.
Як використовувати Генератор CSS-градієнтів
- Виберіть тип градієнта: лінійний, радіальний або конічний.
- Задайте кут (для лінійного), форму та позицію (для радіального) або початковий кут (для конічного).
- Клацніть на смузі градієнта, щоб додати кольорові точки, і перетягніть їх на потрібну позицію.
- Задайте для кожної точки її колір, прозорість і точну позицію.
- Спробуйте пресети або кнопку випадкової генерації для швидкого натхнення.
- Скопіюйте значення градієнта або повне правило CSS.