Красивые градиенты css фона. CSS: Линейный градиент для фона

Для Андроид 16.06.2019
Для Андроид

Красный

Зеленый

Синий

Красный

Зеленый

Синий

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

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

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

Все свойства градиент 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 или ключами

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);
}

a! Градиент является прекрасным инструментом манипуляции с цветом в CSS3 . Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

Линейный градиент

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

В общем случае синтаксис градиента (линейного) выглядит так:

1
2
3
4
5
6
7

div {
background-image : -webkit-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -moz-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;

}

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.

Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

div {
background : radial-gradient (circle , #F9E497 , #FFAE00 ) ;
}

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

Комбинации команд:

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

div {
background-image : radial-gradient (70% 20% , circle , #F9E497 , #FFAE00 ) ;
}

Первое значение по оси Х второе по У .

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

div {
background-image : radial-gradient (230px 50px , ellipse closest-side, white , blue ) ;
}

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X .

А теперь до дальних сторон:

div {
background-image : radial-gradient (230px 50px , ellipse farthest-side, white , blue ) ;
}

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba .

div {
background-image : linear-gradient(top , rgba (255 , 90 , 0 , 0.2 ) , rgba (255 , 174 , 0 , 0.2 ) ) ;
}

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

div {
background-image : linear-gradient(top , red , orange , yellow , green , blue , indigo , violet ) ;
}

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

div {
background-image : repeating-radial-gradient (red , blue 20px , red 40px ) ;
}

0% , #FFAE00 100% ) ; /* для Firefox */
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для IE 10+ */
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для Opera */
background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* стандартный синтаксис */
}

div {
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на

Цветовой градиент - это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B . Градиент может иметь и более двух опорных точек - тогда переход совершается от точки A к точке B , затем от точки B к точке C и так далее.

Как сделать фоновый линейный градиент в CSS

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Background-image: linear-gradient(to left, violet, red); Фоновый градиент на блоке

400×400px

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:

Background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

Background-image: linear-gradient(-110deg, #ee82ee, #ff0000);

Несколько опорных точек

Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:

Background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);

В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.

Длина переходов

По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:

Background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);

В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету - #00ffa2 .

Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.

Вендорные префиксы

Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы - специальные приставки, которые добавляют разработчики браузеров:

  • -webkit- - префикс для Chrome, Safari, Android;
  • -moz- - префикс для Firefox;
  • -o- - префикс для Opera.

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

Background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);

Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.

Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .

Далее в учебнике: repeating-linear-gradient() - повторяющийся линейный градиент.

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах .

В CSS существует два типа градиентов:

  • линейные : цвета идут от одной точки к другой, по прямой линии;
  • радиальные : цвета идут от центра круга к его краям, во всех направлениях.

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

Синтаксис для линейных градиентов является довольно сложным , но основная идея заключается в следующем:

  • определить желаемые цвета ;
  • где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
  • в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

Div { background-image: linear-gradient(red, blue); }

Простой вертикальный фоновый градиент.

По умолчанию:

  • направление вертикальное , сверху вниз;
  • первый цвет в начале (вверху);
  • второй цвет в конце (внизу).

Изменение направления

Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:

  • определить назначение градиента , с помощью таких ключевых слов, как to left top ;
  • определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

Div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }

Диагональный градиент от левого верхнего угла в правый нижний угол.

Если вы хотите задать конкретный угол , то можете использовать значение в градусах :

  • 0deg - снизу вверх;
  • 20deg - немного по диагонали, идущей по часовой стрелке;
  • 90deg - подобно 15 часам, слева направо;
  • 180deg - это значение по умолчанию, сверху вниз.

Div { background-image: linear-gradient(20deg, green, blue); width: 150px; }

Диагональный градиент с углом 20 градусов.

Добавление большего количества цветов

Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:

  • два цвета : 0% и 100%
  • три цвета : 0%, 50% и 100%
  • четыре цвета : 0%, 33%, 67% и 100%

Div { background-image: linear-gradient(orange, grey, yellow); width: 150px; }

Довольно некрасивый градиент, но тут важна идея.

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета , используя либо проценты (%), либо пиксели (px):

Div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }

Тоже уродливый градиент, но тут важна идея.

В данных параметрах:

  • у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
  • цвет grey ближе к верху, на 10% вместо 50%;
  • цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

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

  • форму : круг или эллипс;
  • начальную точку : которая будет центром круга или эллипса;
  • конечную точку : где будет край круга или эллипса.

Div { background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }

Это очень похоже на солнце, не так ли?

По умолчанию:

  • градиент является эллипсом ;
  • первый цвет начинается в центре ;
  • последний цвет заканчивается в самом дальнем углу .

Начальная позиция

Начальная позиция работает как background-position . Вы можете установить её через ключевое слово at .

Div { background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }

Мрачный день.

Конечная позиция

По умолчанию форма завершается в самом дальнем углу . Вы можете выбрать:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

Div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; } div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue); }

Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.

Фиксированный размер

Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры :

Div { background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }

Небольшой фиолетовый диск в море розового цвета.

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.



Рекомендуем почитать