UTILS.
Приватность по умолчанию
▤

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

Создайте линейный или радиальный градиент с живым предпросмотром и скопируйте CSS.

Ваши файлы остаются на этом устройстве

Файлы обрабатываются в браузере и не отправляются на сервер. Сайт загружает код и ресурсы для работы инструментов. Без аккаунтов и трекеров.

Нажмите «Скачать», чтобы сохранить инструмент одним HTML-файлом для работы офлайн.

Конфиденциальность →

Попробуйте разобранный пример

Пример

Выберите линейный тип, задайте угол 135 и цвета #ff7e5f и #feb47b. CSS: background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Если сдвинуть первую точку на 20, первый цвет будет сплошным на первых 20 % блока.

Учтите

0deg направлен вверх, а 90deg — вправо, поэтому 135deg идёт из левого верхнего угла в правый нижний. Если на градиенте есть текст, проверьте его контраст с обоими крайними цветами.

Об этом инструменте

Создайте двухцветный линейный или радиальный градиент, выбрав цвета, позиции и угол, затем скопируйте правило background. Живой предпросмотр работает полностью в вашем браузере.

Часто задаваемые вопросы

Что означает угол в линейном градиенте?
Угол задаёт направление перехода цветов: 0° указывает вверх, 90° — вправо, 180° — вниз и так далее.
Когда использовать радиальный градиент вместо линейного?
Радиальный используйте, чтобы цвета расходились от центральной точки (как прожектор); линейный смешивает их вдоль прямой линии.

Больше инструментов