В чём разница между линейными, радиальными и коническими градиентами?

Линейные градиенты переходят цвета вдоль прямой линии, радиальные градиенты исходят от центральной точки наружу в виде круга/эллипса, а конические градиенты вращаются вокруг центральной точки как цветовое колесо.

Как контролировать направление градиента?

Для линейных градиентов используйте углы (45deg) или ключевые слова (to right, to bottom). Для радиальных градиентов укажите позицию (center, top left). Конические градиенты используют углы from для установки начальной позиции.

Могу ли я добавить несколько цветовых остановок?

Да! Добавляйте столько цветовых остановок, сколько нужно. Каждая может иметь определённую позицию (red 0%, blue 50%, green 100%) для точного контроля того, где цвета появляются в градиенте.

Как создать плавные против резких переходов?

Плавные переходы используют отдалённые цветовые остановки (red 0%, blue 100%). Резкие переходы размещают цветовые остановки близко друг к другу (red 49%, blue 51%) для резких изменений цвета.

Лучше ли CSS градиенты изображений для производительности?

Да! CSS градиенты - это векторы, идеально масштабируются, имеют меньший размер файла, чем изображения, и не требуют HTTP запросов. Они также легко настраиваемые и анимируемые.

CSS Gradient генератор

Создавайте линейные, радиальные и конические градиенты с визуальным редактором

Предварительный просмотр

background: linear-gradient(to bottom, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 100%);

Настройки

Тип градиента

Повторяющийся

Направление

Угол: 180°

Цветовые точки

#3b82f6

0% • 100% opacity

#8b5cf6

100% • 100% opacity

Цвет

Позиция: 0%

Прозрачность: 100%

Готовые градиенты

Share This Tool

Found this tool helpful? Share it with your friends and colleagues!

Pro tip: You can also use the keyboard shortcut Ctrl+Shift+S to quickly share

CSS Box-shadow генератор теней

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

css

box-shadow

Конвертер цветов

Конвертируйте цвета между HEX, RGB, HSL, CMYK, LAB и другими цветовыми моделями

color

converter

Конвертер единиц CSS

Конвертируйте пиксели в rem и em единицы с настраиваемым базовым размером

rem