Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет три типа градиентов:
- Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяется с центра)
- Конические градиенты (повернутый вокруг центральной точки)
CSS Линейные градиенты
Чтобы создать линейный градиент, вы должны определить по крайней мере две цветовые границы. Цветовые переходы - это цвета, между которыми вы хотите отобразить плавные переходы. Вы также можете задать начальную точку и направление (или угол) вместес эффектом градиента.
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Направление - сверху вниз (это значение по умолчанию)
В следующем примере показан линейный градиент, который начинается сверху. Он начинается красным, переходя к желтому:
#grad {
background-image: linear-gradient(red, yellow);
}
Попробуйте сами »
Направление - слева направо
В следующем примере показан линейный градиент, который начинается слева. Он начинается красным, переходя к желтому:
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Попробуйте сами »
Направление - диагональ
Вы можете создать градиент по диагонали, указав начальные позиции как по горизонтали, так и по вертикали.
В следующем примере показан линейный градиент, который начинается в верхнем левом углу (и переходит в нижний правый). Он начинается красным, переходя к желтому:
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Попробуйте сами »
Использование углов
Если вы хотите больше контролировать направление градиента, вы можете определить угол вместо предопределенных направлений (снизу, сверху, справа, слева, справа внизу и т.д.). Значение 0 градусов эквивалентно "to top". Значение 90 градусов эквивалентно "вправо". Значение 180 градусов эквивалентно "снизу".
Синтаксис
background-image: linear-gradient(angle, color-stop1, color-stop2);
Следующий пример показывает, как использовать углы на линейных градиентах:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Попробуйте сами »
Использование нескольких цветовых остановок
В следующем примере показан линейный градиент (сверху вниз) с несколькими цветовыми остановками:
#grad {
background-image: linear-gradient(red, yellow, green);
}
Попробуйте сами »
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Попробуйте сами »
Использование прозрачности
Градиенты CSS также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.
Чтобы добавить прозрачности, мы используем функцию rgba() для определения цветовых остановок. Последним параметром в функции rgba() может быть значение от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, который начинается слева. Он становится полностью прозрачным, переходя к полноцветному красному:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Попробуйте сами »
Повторение линейного градиента
Функция repeating-linear-gradient() используется для повторения линейных градиентов:
Повторяющийся линейный градиент:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »