Полное руководство по градиентам CSS: линейные/радиальные/конические градиенты и продвинутые визуальные эффекты

Три типа градиентов CSS

Тип	Синтаксис	Визуальный эффект
Линейный градиент	`linear-gradient()`	Переход по прямой линии
Радиальный градиент	`radial-gradient()`	Распространение от центра наружу
Конический градиент	`conic-gradient()`	Вращение вокруг центра

Линейный градиент (linear-gradient)

Базовый синтаксис

/* Направление + цветовые точки */
background: linear-gradient(направление, точка1, точка2, ...);

/* Пример */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

Параметры направления

/* Направления по ключевым словам */
to top          /* Снизу вверх */
to right        /* Слева направо */
to bottom       /* Сверху вниз (по умолчанию) */
to left         /* Справа налево */
to top right    /* По диагонали */

/* Углы (точнее) */
0deg    /* → to top */
90deg   /* → to right */
180deg  /* → to bottom */
45deg   /* → Диагональ верхний правый */
135deg  /* → Диагональ нижний правый */

Управление цветовыми точками

/* Равномерное распределение (автоматическая позиция) */
background: linear-gradient(red, yellow, green);
/* red: 0%, yellow: 50%, green: 100% */

/* Указанная позиция */
background: linear-gradient(red 0%, yellow 30%, green 100%);

/* Резкая граница (без перехода) */
background: linear-gradient(red 50%, blue 50%);

/* Многосегментный градиент */
background: linear-gradient(
  red 0%, red 20%,
  yellow 20%, yellow 40%,
  green 40%, green 60%,
  blue 60%, blue 80%,
  purple 80%, purple 100%
);

Радиальный градиент (radial-gradient)

Базовый синтаксис

background: radial-gradient(форма размер at позиция, точки...);

/* Пример */
background: radial-gradient(circle, #ff6b6b, #556270);
background: radial-gradient(ellipse at top, #ffd89b, #19547b);
background: radial-gradient(circle 100px at center, #fff, #000);

Форма

circle    /* Круг */
ellipse   /* Эллипс (по умолчанию) */

Ключевые слова размера

closest-side     /* До ближайшей стороны */
farthest-side    /* До самой дальней стороны */
closest-corner   /* До ближайшего угла */
farthest-corner  /* До самого дальнего угла (по умолчанию) */

Позиция

at center           /* По центру (по умолчанию) */
at top left         /* Верхний левый угол */
at 30% 70%          /* Позиционирование в процентах */
at 100px 200px      /* Позиционирование в пикселях */

Конический градиент (conic-gradient)

Базовый синтаксис

background: conic-gradient(from начальный-угол at позиция, точки...);

/* Пример */
background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg, #f00, #0f0, #00f, #f00);

Практика: круговая диаграмма

.pie-chart {
  background: conic-gradient(
    #3b82f6 0% 35%,
    #ef4444 35% 55%,
    #22c55e 55% 80%,
    #f59e0b 80% 100%
  );
  border-radius: 50%;
}

Практика: цветовое колесо

.color-wheel {
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  border-radius: 50%;
}

Продвинутые визуальные эффекты

1. Наложение градиентов (многослойные)

.multi-gradient {
  background:
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

2. Сеточный фон

.grid-bg {
  background:
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

3. Точечный фон

.dot-bg {
  background: radial-gradient(circle 2px, #999 100%, transparent 100%);
  background-size: 20px 20px;
}

4. Световой эффект (Shine Effect)

.shine-button {
  position: relative;
  overflow: hidden;
  background: #3b82f6;
}

.shine-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.4) 45%,
    rgba(255,255,255,0.4) 55%,
    transparent 60%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

5. Стекломорфизм (Glassmorphism)

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

6. Градиентный текст

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

7. Градиентная рамка

.gradient-border {
  position: relative;
  background: #1f2937;
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  border-radius: 14px;
  z-index: -1;
}

8. Анимированный градиент

.animated-gradient {
  background: linear-gradient(
    -45deg,
    #ee7752, #e73c7e, #23a6d5, #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Повторяющиеся градиенты

/* Повторяющийся линейный градиент → полосы */
.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* Повторяющийся радиальный градиент → мишень */
.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* Повторяющийся конический градиент → радар */
.repeating-conic {
  background: repeating-conic-gradient(
    #3b82f6 0deg 30deg,
    #60a5fa 30deg 60deg
  );
}

Использование генератора градиентов Tools Ku

Откройте Генератор градиентов CSS
Выберите тип градиента (линейный/радиальный/конический)
Добавьте цветовые точки, настройте позиции и цвета
Настройте направление/угол
Просматривайте эффект в реальном времени
Скопируйте сгенерированный CSS-код

Оптимизация производительности градиентов

Совет	Описание
Избегайте слишком большого количества цветовых точек	3-5 точек оптимально, более 8 ухудшают рендеринг
Предпочитайте hex вместо rgba	`#ff000080` короче, чем `rgba(255,0,0,0.5)`
Держите область градиента небольшой	Большие градиенты увеличивают стоимость отрисовки
Используйте background-position для анимаций	Не анимируйте значения цветовых точек
`will-change: background`	Добавьте подсказку для анимированных градиентов

Совместимость с браузерами

Функция	Chrome	Firefox	Safari
linear-gradient	✅ Все	✅ Все	✅ Все
radial-gradient	✅ Все	✅ Все	✅ Все
conic-gradient	69+	83+	12.1+
repeating-conic-gradient	69+	83+	12.1+
Многослойные градиенты	✅ Все	✅ Все	✅ Все
`background-clip: text`	✅	49+	✅

Итоги

Градиенты CSS — это швейцарский нож визуального дизайна — от простых двухцветных переходов до сложных сеточных фонов, световых эффектов и стекломорфизма, градиенты справятся со всем. Освоив три типа (линейный/радиальный/конический) + управление цветовыми точками + многослойное наложение, вы сможете реализовать большинство визуальных эффектов. Генератор градиентов от Tools Ku позволяет визуально настраивать параметры и копировать CSS-код одним нажатием.