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

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

Тип градієнта
Колірні точки
CSS
Налаштуйте точки та напрямок, щоб створити градієнт.

Кожен градієнт рендериться безпосередньо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo.

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

Яка різниця між лінійним, радіальним та конічним градієнтами?

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

Що таке колірні точки (color stops)?

Кожна колірна точка (color stop) — це колір, прив’язаний до певної позиції вздовж градієнта (від 0% на початку до 100% в кінці). Переміщуйте точки, щоб змінювати межі змішування кольорів, або додавайте нові для багатших переходів. Можна використовувати до восьми точок.

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

Для лінійного або конічного градієнта повзунок кута задає напрямок: 0° вказує вгору, 90° — праворуч. Радіальний градієнт не має кута; замість цього виберіть форму кола чи еліпса, щоб змінити спосіб його розходження.

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор Border RadiusЗаокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор CSS GridЗадавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.Калькулятор CSS clamp()Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV, CMYK та LAB — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.Форматування та мініфікація CSSВирівнюйте заплутаний CSS для зручного читання або мініфікуйте його для публікації — з безпечним режимом, який ніколи не змінює порядок правил.Перевірка контрастностіВведіть кольори тексту та фону, щоб дізнатися коефіцієнт контрастності WCAG та перевірити відповідність стандартам AA й AAA.