Генератор CSS-градиента — линейный и радиальный

Как пользоваться

1. Выберите линейный или радиальный градиент.
2. Выберите начальный и конечный цвета.
3. Для линейного градиента задайте угол, затем настройте позиции обоих цветов от 0 до 100 %.
4. Посмотрите предпросмотр и скопируйте CSS в правило стиля своего элемента.

Точки цвета и направление

Цвета выводятся в шестизначном шестнадцатеричном формате. До первой точки градиент сохраняет первый цвет, после второй — второй. Между ними находится переход. Начальная позиция не может быть больше конечной.

Линейный градиент идёт под выбранным углом. Радиальный использует radial-gradient(circle, ...) и расходится от центра; угол в этом режиме не применяется. Если итоговый элемент имеет другие размеры, чем предпросмотр, видимое распределение цветов может измениться.

Примеры

• linear-gradient(90deg, #6366f1 0%, #ec4899 100%) переходит от фиолетового слева к розовому справа.
• Если обе позиции равны 50 %, цвета разделятся чёткой границей.
• В радиальном режиме сдвиг первой точки на 25 % увеличивает однотонную область вокруг центра до начала перехода.

Применение результата

Объявление использует сокращённое свойство background, которое может сбросить другие свойства фона того же элемента. Проверьте существующие правила, прежде чем вставлять его в таблицу стилей.

Если поверх градиента находится текст, проверьте контраст во всех областях за текстом, а не только на одном конце. Предпросмотр показывает фон, но не заменяет полную проверку доступности. Градиент создаётся в браузере.