Градиент css генератор

Отображение градиента css



Красный
Зеленый
Синий


Красный
Зеленый
Синий


Готовый код градиента css


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

  1. Левый цвет градиента. Подбираем у блока в левой части цвет любых оттенков с помощью сочетания красного, зеленого и синего цвета.
  2. Правый цвет градиента. Выбираем оттенок цвета справа.
  3. Уровень между градиентами. Расстояние от левой части блока где начнется градиент.
  4. Размытие градиента. Смешивание двух цветов от уровня между цветами.
  5. Угол границы градиента. Направление линии для равномерного изменения цвета от 0 до 365 градусов.
градиент css генератор

Все свойства градиент css

Градиент css накладывается на элементы в lending page такие как

  • Градиент кнопки для украшения лендинга.
  • Задний css градиент фона секции.
  • Градиент картинки css с прозрачностью.
  • Css градиент текста большого заголовка.

Создадим простой элемент в теге див с классом grad. Чтобы наложить градиент на класс grad зададим контур с шириной и высотой в файле стилей css. После этого можно добавить свойство градиента, который получился в генераторе градиента css. Gradient задается в свойстве background, затем пишем префикс webkit linear gradient для корректного отображения в разных интернет браузерах. Во вторых пишем какого вида будет градиент, выбираем из трех.

  1. Линейный градиент css. Состоит из двух или больше цветов. Цвет изменяется от одного к другому равномерно по линии, с заданием угла.
  2. Радиальный градиент. Цвет от одного к другому распределяется равномерно в форме круга, внутри элемента.
  3. Повторяющийся градиент со свойством repeating. Подходит к линейному и радиальному.

градиент css примеры

Разберем на примерах все виды градиентов.

1). Пример linear-gradient() линейный градиент

У linear gradient угол наклона задается параметром deg или ключами

  1. to right угол в 90deg.
  2. to left угол будет 270deg.
  3. to top угол равен 0deg.
  4. to bottom угол границы 180deg.
.gradient1 {
background: linear-gradient(45deg, Aquamarine, GreenYellow);
}
.gradient2 {
background: linear-gradient(to top left, Fuchsia, MidnightBlue);
}
.gradient3 {
background: linear-gradient(to top, SaddleBrown 20%, OrangeRed 50%, Goldenrod 80%);
}
.gradient4 {
background: linear-gradient(to right, LightBlue 20%, LightGreen 20%, Thistle 80%, Wheat 80%);
}

2). Пример radial-gradient() радиальный градиент

.gradient5 {
background: radial-gradient(LightCoral , PapayaWhip);
}

С помощью ключа at задаем точку начала радиального градиента.

.gradient6 {
background: radial-gradient(at top, Turquoise, Azure);
}

Задаем размеры элипса в процентах

  1. Первое значение ширина.
  2. Второе высота элипса.
.gradient7 {
background: radial-gradient(40% 50%, MediumPurple, SeaShell);
}

Используем ключ farthest-corner для выставления размера градиента до дальнего угла.

.gradient8 {
background: radial-gradient(circle farthest-corner at 100px 50px, Yellow, DimGray);
}

Чтобы градиент стал круглым пишем ключ circle, по умолчанию он в виде ellipse.

.gradient9 {
background: radial-gradient(circle at 70% 10%, LightCyan, Magenta);
}

3). repeating-linear-gradient или repeating-radial-gradient повторяющийся градиент css

.gradient10 {
background: repeating-radial-gradient(circle, MediumSpringGreen, MediumSpringGreen 15px, Pink 15px, Pink 30px);
}
.gradient11 {
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 20px, #465298 10px, #465298 20px);
}