Градиенты в CSS: линейные, радиальные и конические градиенты

🌈 Что такое градиенты и зачем они нужны?

Градиенты — это плавные переходы между двумя или более цветами. Они позволяют создавать сложные визуальные эффекты без использования изображений, ускоряя загрузку страницы и делая дизайн гибким.

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

Линейные (прямая линия)
Радиальные (круг или эллипс)
Конические (вращение вокруг точки)

/* Простейший пример */
.element {
  background: linear-gradient(red, blue);
}

💡 Совет: Градиенты работают везде, где можно задать background или background-image — кнопки, разделители, даже тексты!

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

Самый популярный тип. Цвета распределяются вдоль прямой линии, которую можно поворачивать.

Базовая структура:

selector {
  background: linear-gradient(направление, цвет1, цвет2, ...);
}

Примеры с пояснениями:

/* Вертикальный градиент (по умолчанию) */
.gradient-1 {
  background: linear-gradient(#ff0000, #0000ff);
}

/* Горизонтальный (90deg = справа) */
.gradient-2 {
  background: linear-gradient(90deg, red, blue);
}

/* Диагональный (45 градусов) */
.gradient-3 {
  background: linear-gradient(45deg, pink, violet);
}

/* С указанием точек остановки цветов */
.gradient-4 {
  background: linear-gradient(to right, yellow 0%, green 50%, black 100%);
}

🔥 Фишка: Используйте to top right вместо градусов для более интуитивного управления направлением.

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

Цвета расходятся из центра круга или эллипса во все стороны. Идеально для создания эффектов света, сфер или "размытых пятен".

Синтаксис:

selector {
  background: radial-gradient([форма] [размер] at позиция, цвет1, цвет2);
}

Практические примеры:

/* Простейший круг */
.radial-1 {
  background: radial-gradient(red, blue);
}

/* Эллипс с явным центром */
.radial-2 {
  background: radial-gradient(ellipse at 20% 30%, yellow, green);
}

/* Жёсткие границы цветов */
.radial-3 {
  background: radial-gradient(circle, red 0%, red 30%, blue 30%, blue 60%, green 60%);
}

🌟 Применение: Отлично подходит для создания фонов "под стекло" или неоновых эффектов.

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

Менее распространённый, но невероятно мощный тип. Цвета распределяются по окружности, вращаясь вокруг центральной точки.

Как использовать:

selector {
  background: conic-gradient(цвет1 угол1, цвет2 угол2, ...);
}

Крутые примеры:

/* Простой цветовой круг */
.conic-1 {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* Диаграмма (Pie Chart) */
.conic-2 {
  background: conic-gradient(
    gold 0deg 90deg, 
    silver 90deg 180deg, 
    bronze 180deg 270deg, 
    black 270deg
  );
  border-radius: 50%;
}

/* Шахматная доска в 4 строки! */
.conic-3 {
  background: conic-gradient(#000 0 25%, #fff 0 50%, #000 0 75%, #fff 0 100%);
  background-size: 50px 50px;
}

⚡ Важно: Для конических градиентов лучше указывать углы явно (например, 90deg), чтобы избежать неожиданностей в разных браузерах.

🛠 Комбинирование градиентов

Настоящая магия начинается, когда вы комбинируете несколько градиентов через запятую!

.magic-box {
  background: 
    radial-gradient(circle at 75% 25%, white, transparent),
    linear-gradient(135deg, #ff00cc, #3333ff);
  background-blend-mode: overlay;
}

Что происходит:

Сначала накладывается радиальный градиент (белое пятно вверху справа)
Затем линейный (розово-синий диагональный фон)
background-blend-mode: overlay смешивает их особым образом

🎨 Экспериментируйте с mix-blend-mode и background-blend-mode для создания уникальных эффектов!

🧪 Продвинутые техники

1. Анимация градиентов

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

.animated-bg {
  background: linear-gradient(45deg, red, blue, green);
  background-size: 300% 300%;
  animation: gradient-shift 5s ease infinite;
}

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

.gradient-text {
  background: linear-gradient(to right, red, purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3em;
}

3. Градиентные границы

.gradient-border {
  border: 5px solid transparent;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, darkblue, darkorchid) border-box;
}

🏆 Лучшие практики

1. Производительность: Градиенты рендерятся быстрее изображений, но сложные комбинации могут нагружать GPU.

2. Резервный цвет: Всегда добавляйте фоновый цвет перед градиентом на случай, если градиент не загрузится:

.safe-bg {
   background: #3498db;
   background: linear-gradient(to right, #3498db, #2ecc71);
}

3. Доступность: Убедитесь, что текст остаётся читаемым на градиентном фоне. Используйте контрастные проверки.