Загрузка...

Градиенты в CSS

Сплошные цвета и фото закрывают многие фоны. Иногда нужен мягкий переход между цветами — спокойный баннер, светящаяся карточка, небо без огромного файла. Этот переход — градиент, который CSS рисует как особый вид background-image.

Что такое градиент CSS?

Градиент — изображение, которое браузер генерирует, а не JPG для скачивания. Вы описываете его функциями вроде linear-gradient() и radial-gradient(), затем ставите в background-image (или сокращение background). Результат лежит за содержимым как фото-фон.

Виды одним взглядом

Начните с этих двух. Конические могут подождать.

📊 Повседневные виды градиентов CSS

Вид Функция Повседневное применение
Линейный linear-gradient(…) Баннеры, кнопки, заливка секции слева→направо или сверху→вниз
Радиальный radial-gradient(…) Мягкие карточки-прожекторы, круговое затухание от центра
Слова направления to right, to bottom Читаемое линейное направление без углов
Угол 45deg, 90deg Точный наклон, когда слов мало
Цветовые стопы teal 0%, navy 100% Где каждый цвет сидит на переходе

Линейный: два цвета, слева направо

Простейший линейный градиент нуждается в направлении и хотя бы двух цветах. CSS смешивает между ними.

Простой линейный градиент слева→направо

css
CSS Code 
.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}

Как читать функцию

to right — направление. #0f766e начинает; #0f172a заканчивает. Браузер заполняет середину.

Углы и больше стопов

Угол даёт диагональную заливку; средние стопы — более богатый переход.

Угловой линейный с тремя стопами

css
CSS Code 
.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}

Привычка стопа

Цветовой стоп — «этот цвет здесь». Проценты легко читать. Позиции можно опустить — браузер распределит равномерно.

Радиальный: затухание от центра

radial-gradient() расходится от центра — удобно для мягких карточек и фокусного свечения.

Мягкая радиальная карточка

css
CSS Code 
.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}

Совет про круг

circle at center держит форму круглой и по центру. Позже at top или at 20% 30% для прожектора в другом месте.

Градиенты живут на background-image

Не кладите функцию градиента в color — она красит текст. Градиенты — фоновые изображения; контраст текста всё ещё важен.

Сокращение с запасным цветом

css
CSS Code 
.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}

Попробуйте сами

  1. .banner с linear-gradient(to right, #0f766e, #0f172a) и светлым текстом.
  2. Направление to bottom — ось смешения переворачивается.
  3. .hero с 135deg и тремя стопами (teal → середина → navy).
  4. .card с radial-gradient(circle at center, #ccfbf1, #0f766e).
  5. По желанию: сплошной запасной цвет перед градиентом в сокращении background.

Частые ошибки

  • Писать color: linear-gradient(…) — градиент не цвет текста
  • Только один цветовой стоп — для смешения нужно минимум два цвета
  • Забыть, что это background-image (контраст и слои всё ещё работают)
  • Радужный шум на каждой секции — мягкие два-три стопа выглядят профессиональнее
  • Ждать, что градиент заменит смысловые фото (снимки товара остаются настоящими изображениями)

Кратко

  • Градиенты — сгенерированные браузером фоновые изображения
  • linear-gradient() смешивает вдоль линии; radial-gradient() от центра
  • Слова направления, углы и цветовые стопы управляют видом
  • Подключайте через background-image или сокращение background
  • Держите сильный контраст текста сверху
  • Практикуйте линейный баннер и радиальную карточку до сложных трюков

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок