Градиенты

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

Использование градиентов повышает визуальную глубину интерфейса, помогает выделять важные элементы и формировать современный визуальный стиль.

Основы CSS-градиентов

Градиенты в веб-разработке реализуются через функцию linear-gradient() или radial-gradient().

Пример линейного градиента:

background: linear-gradient(to right, #ff7e5f, #feb47b);

В этом примере:

  • to right — направление градиента
  • #ff7e5f — начальный цвет
  • #feb47b — конечный цвет

Vuetify не ограничивает использование стандартных CSS-градиентов, поэтому они могут применяться в стилях компонентов напрямую.

Использование градиента в компонентах Vuetify

Градиент можно задать через атрибут style или через CSS-класс.

Пример с v-card

<v-card
  class="pa-6 white--text"
  style="background: linear-gradient(135deg, #667eea, #764ba2);"
>
  Gradient Card
</v-card>

Особенности:

  • угол 135deg задаёт направление перехода
  • тексту задаётся цвет white--text, чтобы сохранить читаемость
  • градиент применяется к фону карточки

Создание CSS-классов для градиентов

В реальных проектах градиенты чаще выносятся в отдельные классы.

.gradient-primary {
  background: linear-gradient(135deg, #42a5f5, #478ed1);
}

.gradient-success {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}

.gradient-warning {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}

Использование:

<v-card class="gradient-primary white--text pa-6">
  Gradient background
</v-card>

Преимущества такого подхода:

  • переиспользуемость
  • централизованное управление стилями
  • упрощение поддержки проекта

Градиенты в кнопках

Компонент v-btn также может использовать градиентный фон.

<v-btn
  class="white--text"
  style="background: linear-gradient(45deg, #ff512f, #dd2476);"
>
  Gradient Button
</v-btn>

Особенности:

  • стандартные свойства color здесь не используются
  • фон полностью контролируется CSS
  • для текста задаётся явный цвет

Градиенты через class и scoped стили

В одностраничных компонентах Vue удобно использовать scoped стили.

<template>
  <v-sheet class="gradient-header pa-6">
    Header
  </v-sheet>
</template>

<style scoped>
.gradient-header {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: white;
}
</style>

Преимущества:

  • стили ограничены текущим компонентом
  • исключаются конфликты классов

Направления градиентов

CSS поддерживает различные способы задания направления.

Через градусы

linear-gradient(180deg, #ff9a9e, #fad0c4)

Через ключевые слова

linear-gradient(to bottom, #ff9a9e, #fad0c4)

Популярные углы

Угол Эффект
0deg снизу вверх
90deg слева направо
180deg сверху вниз
270deg справа налево

Пример в Vuetify:

<v-sheet style="background: linear-gradient(90deg, #ff9a9e, #fad0c4);">
</v-sheet>

Многоцветные градиенты

Градиент может включать несколько цветов.

background: linear-gradient(
  90deg,
  #ff0000,
  #ffa500,
  #ffff00,
  #00ff00,
  #0000ff
);

Пример использования:

<v-card
  class="white--text pa-6"
  style="background: linear-gradient(90deg,#ff0000,#ffa500,#ffff00,#00ff00,#0000ff);"
>
  Multicolor gradient
</v-card>

Радиальные градиенты

Радиальный градиент распространяется от центральной точки.

background: radial-gradient(circle, #ff9a9e, #fad0c4);

Пример:

<v-sheet
  height="200"
  style="background: radial-gradient(circle, #ff9a9e, #fad0c4);"
>
</v-sheet>

Возможные формы:

  • circle
  • ellipse

Градиенты с прозрачностью

Для создания мягких оверлеев используется rgba.

background: linear-gradient(
  rgba(0,0,0,0.6),
  rgba(0,0,0,0.1)
);

Пример использования поверх изображения:

<v-sheet
  class="d-flex align-center justify-center"
  height="300"
  style="
    background-image:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)),
      url('/image.jpg');
    background-size: cover;
  "
>
  <span class="white--text text-h5">Overlay</span>
</v-sheet>

Этот подход часто используется в:

  • hero-блоках
  • карточках с изображениями
  • баннерах

Градиенты и тема Vuetify

Цвета темы можно использовать внутри градиента.

background: linear-gradient(
  45deg,
  var(--v-theme-primary),
  var(--v-theme-secondary)
);

Пример:

<v-card class="gradient-theme white--text pa-6">
  Theme Gradient
</v-card>
.gradient-theme {
  background: linear-gradient(
    45deg,
    var(--v-theme-primary),
    var(--v-theme-secondary)
  );
}

Преимущество:

  • автоматическое обновление при смене темы
  • поддержка светлого и тёмного режимов

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

Градиент можно анимировать через CSS.

.animated-gradient {
  background: linear-gradient(
    270deg,
    #ff6a00,
    #ee0979,
    #00c6ff
  );
  background-size: 600% 600%;
  animation: gradientAnimation 8s ease infinite;
}

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

Пример использования:

<v-sheet class="animated-gradient pa-8 white--text">
  Animated Gradient
</v-sheet>

Такой эффект применяется в:

  • заголовках лендингов
  • футерах
  • рекламных баннерах

Градиентные разделители

Градиент удобно применять к разделителям.

.gradient-divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    #1976d2,
    transparent
  );
}

Использование:

<div class="gradient-divider"></div>

Такой элемент выглядит более мягко, чем стандартный v-divider.

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

Для текста используется background-clip.

.gradient-text {
  background: linear-gradient(45deg, #ff512f, #dd2476);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Пример:

<h1 class="gradient-text">
  Gradient Title
</h1>

Эффект применяется в:

  • заголовках
  • логотипах
  • маркетинговых блоках

Практические рекомендации

Контрастность

При использовании градиентов важно контролировать читаемость текста.

Рекомендуется:

  • использовать white--text или black--text
  • добавлять полупрозрачные оверлеи
  • проверять контраст

Ограничение количества цветов

Оптимальное количество цветов:

  • 2–3 для интерфейсов
  • до 5 для декоративных элементов

Большое количество цветов может создавать визуальный шум.

Единый стиль

В проекте обычно используется ограниченный набор градиентов:

  • основной
  • акцентный
  • нейтральный

Это поддерживает визуальную консистентность.

Производительность

Градиенты почти не влияют на производительность, но следует избегать:

  • сложных анимаций
  • слишком частых обновлений стилей
  • чрезмерного использования прозрачности поверх изображений

Распространённые комбинации градиентов

Синий

linear-gradient(135deg, #2193b0, #6dd5ed)

Фиолетовый

linear-gradient(135deg, #667eea, #764ba2)

Закат

linear-gradient(135deg, #ff7e5f, #feb47b)

Неоновый

linear-gradient(135deg, #00c6ff, #0072ff)

Такие комбинации часто используются в интерфейсах Vuetify благодаря их визуальной выразительности и хорошей читаемости текста.

Оглавление