Градиент

Что такое градиент? Виды градиентов

Некоторые понятия и термины используются сугубо в узких рамках профессиональной лексики. Другие же определения встречаются в областях, резко противоположных. Так, например, понятием “градиент” пользуется и физик, и математик, и специалист по маникюру или “Фотошопу”. Что же такое градиент как понятие? Давайте разбираться.

Что говорят словари?

Что такое “градиент” специальные тематические словари трактуют в соотношении со своей спецификой. В переводе с латинского языка это слово обозначает – “тот, который идет, растет”.

А “Википедия” определяет это понятие как “вектор, указывающий направление возрастания величины”. В толковых словарях мы видим значение этого слова как “изменение любой величины на одно значение”.

Понятие может нести как количественное, так и качественное значение.

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

Математические функции

Что такое градиент функции в математике? Это вектор, направление которого указывает направление роста функции в скалярном поле от одного значения к другому. Величина градиента рассчитывается с помощью определения частных производных.

Для выяснения максимально быстрого направления роста функции на графике выбираются две точки. Они определяют начало и конец вектора. Скорость роста значения от одной точки к другой – это величина градиента.

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

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

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

Для определения напряженности силового поля используется градиент потенциала – величина, которая определяет быстроту изменения потенциала по направлению силовой линии. Как рассчитать? Разность потенциалов двух точек электрического поля вычисляется по известному напряжению с помощью вектора напряженности, который равен градиенту потенциала.

Термины метеорологов и географов

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

Он является мерой количественного изменения различных величин. В математику термин ввел Максвелл уже значительно позднее. В определении погодных условий существуют понятия вертикального и горизонтального градиентов.

Рассмотрим их подробнее.

Что такое градиент температуры вертикальный? Это величина, которая показывает изменение показателей, вычисленное на высот в 100 м. Может быть как положительного направления, так и отрицательного, в отличие от горизонтального, который всегда положителен.

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

Медицинские показатели

Определение “градиент температурный” можно встретить также среди медицинских терминов. Он показывает разницу в соответствующих показателях внутренних органов и поверхности тела. В биологии градиент физиологический фиксирует изменение в физиологии любого органа или организма в целом на любой стадии его развития. В медицине показатель метаболический – интенсивность обмена веществ.

Не только физики, но и медики используют этот термин в работе. Что такое градиент давления в кардиологии? Такое понятие определяет разность кровяного давления в любых связанных между собой отделах сердечно-сосудистой системы.

Убывающий градиент автоматии – это показатель уменьшения частоты возбуждений сердца в направлении от его основания к верху, возникающие автоматически. Кроме того, кардиологи место поражения артерии и его степень выявляют благодаря контролю над разностью амплитуд систолических волн. Иными словами, с помощью амплитудного градиента пульса.

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

Когда говорят о скорости изменения некой величины, то подразумевают под этим быстроту изменения по времени и в пространстве. Другими словами градиент скорости определяет изменение пространственных координат в соотношении с временными показателями.

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

Такой показатель тектонических движений – это область расчетов сейсмологов.

Экономические функции

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

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

“Функция бюджетных ограничений” – термин, используемый для обозначения множества потребительских наборов. Градиенты в этой области используют для вычисления оптимальных потреблений.

Градиент цвета

Термин “градиент” знаком творческим личностям. Хоть они и далеки от точных наук.

Что такое градиент для художника, декоратора, дизайнера? Так как в точных науках – это постепенное увеличение величины на единицу, так и в цвете этот показатель обозначает плавный, растянутый переход оттенков одного цвета от более светлого к темному, или же наоборот. Художники так и называют этот процесс – “растяжка». Возможен переход и к разным сопутствующим цветам в одной гамме.

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

Оптики используют специальные линзы в солнцезащитных очках. Что такое градиент в очках? Это изготовление линзы особым способом, когда сверху вниз цвет переходит от более темного к более светлому оттенку. Изделия, изготовленные по такой технологии, защищают глаза от солнечного излучения и позволяют рассматривать предметы даже при очень ярком свете.

Цвет в веб-дизайне

Тем, кто занимается веб-дизайном и компьютерной графикой, хорошо знаком универсальный инструмент “градиент”, с помощью которого создается масса самых разнообразных эффектов. Переходы цвета преображаются в блики, причудливый фон, трехмерность. Манипуляции с оттенками, создание света и тени придает объем векторным объектам. В этих целях используются несколько видов градиентов:

• Линейный.
• Радиальный.
• Конусовидный.
• Зеркальный.
• Ромбовидный.
• Градиент шума.

Градиентная красота

Для посетительниц салонов красоты вопрос о том, что такое градиент, не станет неожиданным. Правда, и в этом случае знание математических законов и основ физики не обязательно. Речь идет все так же о цветовых переходах. Объектом градиента становятся волосы и ногти.

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

Модницы стали специально окрашивать волосы с еле заметным переходом оттенков.

Техника омбре не прошла мимо маникюрных салонов. Градиент на ногтях создает окраску с постепенным осветлением пластины от корня к краю. Мастера предлагают горизонтальный, вертикальный, с переходом и другие разновидности.

Рукоделие

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

Художники по тканям взяли на вооружение окраску таким способом для новых моделей. Платья с расцветкой градиент покорили подиумы. Моду подхватили рукодельницы – вязальщицы. Трикотажные вещи с плавным переходом цвета пользуются успехом.

Подводя итог определению “градиент”, можно сказать об очень обширной области человеческой деятельности, в которой находится место этому термину.

Не всегда замена синонимом “вектор” оказывается подходящей, так как вектор – это все-таки понятие функциональное, пространственное.

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

Источник: http://fb.ru/article/351305/chto-takoe-gradient-vidyi-gradientov

2.15. CSS3-градиент

CSS3-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient().

Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.

Поддержка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

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

Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

{background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);}

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

div { height: 200px; background: linear-gradient(45deg, #EECA, #C5DDE8); }

с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }

Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.

div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:

div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }

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

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

{background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);}

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

div { height: 200px; background: radial-gradient(white, #FFA9A1); }

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #F2EB, #352A3B); }

С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.

Мяч

div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }

Кнопка

.wrap { height: 200px; padding: 50px 0; background: #cccccc; } .button { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); }

Почтовая марка

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

.container { background: #B7D1D8; padding: 25px; } .wrap { background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; } img { width: 100%; }

3. Повтор градиента

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

div { height: 200px; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } div { height: 200px; background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); }

4. Кроссбраузерный градиент

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

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

Источник:

CSS Gradient

Don’t have enough time to make your own gradients? Looking for a supply of popular gradients you can use for your projects? Our swatch collection features a curated selection of gorgeous gradients and color combinations free for you to use however you’d . Each swatch comes with the basic code you’ll need to implement it on your own website.

Browse the gallery

If you need a little inspiration before getting started on your own, our gradient examples page is the best place to go. Sometimes all you need is a little push—a source to jumpstart your creativity, and a couple gradient examples could do just that for you. From Stripe to Scale API, browse the examples to give you that jumpstart you need to start making fresh gradients on your own.

Get inspired

Interested in learing how to use blended colors? Our blog exposes the details of everything gradients and even has some in-depth references for you to look at as you learn how to code these elements yourself. Browse through our references, tutorials, and articles for more information all about gradients.

Learn new tricks

Is the basic information not enough for you? Want to learn more about the inner-workings of gradients and everything to do with them? We’ve gathered some killer resources to help you become a gradient expert, and they’re all available for you here on our resources page. If you’re the kind of person who is always seeking more knowledge, this is the page for you.

Dive deep into gradients

Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial. Because they are of the image data type, gradients can be used anywhere an image might be. The most popular use for gradients would be in a background element.

To put it more relevantly, gradients are part of an extremely popular design trend that has been gaining popularity over the last several years. It seems that they have always been around in the background (no pun intended); although, some sources claim that the trend is “coming back”. Of course, it’s hard for something to come back if it never left, but we’ll chalk that up to semantics.

Gradients allow you—the designer—to explore new opportunities to provide fresh, clean designs for your audience. The added transition between colors allows you to play with two-dimensional and seemingly three-dimensional aspects, taking your designs from boring to extraordinary with some simple code.

In fact, the best thing about gradient code is that it can be as simple or as complex as you’d to make it. You can do the bare minimum and let the browser figure out the rest, or you can take things into your own hands and identify all the odds and ends. You could even do a little extra if you wanted and explore the endless possibilities of gradients.

Linear Gradients

Transitions in linear gradients occur along a straight line determined by an angle or direction.

A CSS linear gradient can be coded by using the linear-gradient() function and can be as simple or complex as you would . At the very least, you’ll only need two colors to get started.

From there, you could add more colors, angles, directions, and more to customize your gradient even further.

Code

background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);

Result

If you leave the code at its most basic styling, the other elements will be determined automatically by the browser. This includes the direction or angle and color-stop positions.

For more customized styling, you can specify these values to create fun gradients with multiple colors or angled directions.

Playing with color-stop positions could also leave you with a solid pattern instead of a traditional gradient. The possibilities are endless!

Compared to radial gradients, linear gradients are certainly more popular in design and branding techniques. For example, you may have noticed the popular music-streaming company, Spotify, and their gradient branding recently. Linear gradients are, perhaps, the easiest way to incorporate this trend into your creations, as they seem to blend smoothly with other design elements.

Radial Gradients

A CSS radial gradient—although far less often seen—is just as beautiful and fun as a linear gradient and can be implemented just as easily. With that said, the code may seem more difficult to figure out at first. It is for this reason that, for some designers, it may be easier to start out with a linear gradient.

Code

background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);

Result

Of course, the code isn’t actually all that complicated at all. In fact, most of the code is exactly the same as that of the linear gradient—with just a few tweaks for extra radial customization.

For example, un with linear gradients, you can actually adjust the size of radial gradients in place of where the direction would normally go.

Playing with the different values that determine these sizes can give you a lot of different results.

While radial gradients may not be as popular as their linear counterparts, it’s possible that you might have seen them more often than you think.

Special CSS techniques can leave you with designs that may be unrecognizable when it comes to the typical idea of what a linear or radial gradient may look .

In the end, radial gradients are just as powerful to use and can give your designs an extra kick of something special.

Источник: https://cssgradient.io/

Градиенты в CSS

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

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

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

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

linear-gradient

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

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

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

CSS

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

HTML

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

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

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

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

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

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

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

CSS

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

HTML

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

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

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

CSS

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

HTML

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

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

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

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

CSS

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

HTML

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

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

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

CSS

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

HTML

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

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

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

radial-gradient

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

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

CSS

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

HTML

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

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

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

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

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

CSS

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

HTML

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

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

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

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

Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.

CSS

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

HTML

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

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

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

CSS

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

HTML

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

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

Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.

Но довольно легко писать едва уловимые градиенты, особенно для кнопок:

CSS

.button-grey { background-image: linear-gradient(#f2f2f2, #f2f2f2); } .button-yellow { background-image: linear-gradient(#fce374, #fcdf5b); } .button-orange { background-image: linear-gradient(#f58a38, #f57c20); } .button-red { background-image: linear-gradient(#ed6d64, #ed574c); } .button-purple { background-image: linear-gradient(#847bba, #7568ba); } .button-blue { background-image: linear-gradient(#42b0e3, #2ba9e3); } .button-green { background-image: linear-gradient(#97cc76, #8bcc62); }

Перейти к заданиям

Источник: https://webref.ru/course/css-advanced/gradients

Функция linear-gradient

Функция linear-gradient задает линейный градиент.

Данная функция применяется к свойствам, которые задают картинку фона: background, background-image или картинку границы: border-image, background-image-source.

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

селектор { background: linear-gradient([угол или направление], цвет1 размер1, цвет2 размер2, цвет3 размер3…)}

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор { background: linear-gradient(to right, red 0px, blue 30px, transparent 30px), radial-gradient(circle closest-side at center, green, transparent); }

Особенности

Функция очень мощная и имеет много необязательных параметров и особенностей использования.

Самый простой вариант

Синтаксис:

селектор { background: linear-gradient(начальный цвет, конечный цвет);}

Посмотрим на примере:

селектор {background: linear-gradient(red, white);}

Результат выполнения кода:

Добавляем угол

Синтаксис:

селектор { background: linear-gradient(угол, начальный цвет, конечный цвет);}

Посмотрим на примере:

селектор { background: linear-gradient(45deg, red, white);}

Результат выполнения кода:

Добавляем направление

Вместо угла можно добавить направление: top, left, right, bottom. Или комбинацию направлений: top left, top right и так далее.

Обратите внимание на то, что перед направлением ставится слово to: to top, to bottom и так далее. В старых браузерах to не использовалось. При этом запись работает так: to top – это градиент снизу вверх, а просто top – это градиент сверху вниз. Современные браузеры понимают градиент только с to.

Синтаксис:

селектор { background: linear-gradient(направление, начальный цвет, конечный цвет);}

Посмотрим на примере:

селектор { background: linear-gradient(to left, red, white);}

Результат выполнения кода:

селектор { background: linear-gradient(to top left, red, white);}

Результат выполнения кода:

Добавляем размер

Синтаксис:

селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2);}

Посмотрим на примере:

селектор { background: linear-gradient(red 30px, blue 50px);}

В данном случае поведение следующее (и очень неожиданное!): чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до конца – чистый голубой:

Результат выполнения кода:

Добавляем более чем 2 цвета

Синтаксис:

селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3…);}

Посмотрим на примере:

селектор {background: linear-gradient(red 30px, blue 50px, green 70px);}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до 70px – градиент от голубого до зеленого, а после 70px – чистый зеленый:

Результат выполнения кода:

Резкие переходы

селектор { background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой – от 30px до 60px, чистый зеленый – после 60px (red 0px можно и не писать):

Результат выполнения кода:

Размеры можно задавать и в процентах

селектор { background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);}

В данном случае поведение следующее: чистый красный цвет будет от 0% до 30%, чистый голубой – от 30% до 60%, чистый зеленый – после 60% (red 0% можно и не писать):

Результат выполнения кода:

Сочетание с background-size

селектор { background: linear-gradient(to right, red 30px, blue 30px, blue 60px); background-size: 60px 60px;}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой – от 30px до 60px, при этом все это будет повторяться кусочками по 60px (из-за background-size: 60px;):

Результат выполнения кода:

А вот без background-size при таком же градиенте будет такое:

Результат выполнения кода:

Значения

Значение по умолчанию: нет (?).

Пример

В данном примере градиент направлен снизу вверх (это значит, что красный будет снизу):

#elem { background: red; /* Для старых браузров */ background: -webkit-linear-gradient(to top, red, white); background: -moz-linear-gradient(to top, red, white); background: -o-linear-gradient(to top, red, white); background: linear-gradient(to top, red, white);}

Результат выполнения кода:

Пример

В данном примере градиент направлен сверху вниз (это значит, что красный будет сверху):

#elem { background: red; /* Для старых браузров */ background: -webkit-linear-gradient(to bottom, red, white); background: -moz-linear-gradient(to bottom, red, white); background: -o-linear-gradient(to bottom, red, white); background: linear-gradient(to bottom, red, white);}

Результат выполнения кода:

Пример

Сделаем градиентную границу с помощью border-image (как работает border-image – смотрите по ссылке):

#elem { background: green; -webkit-border-image: linear-gradient(to bottom, red, blue) 1; -moz-border-image: linear-gradient(to bottom, red, blue) 1; -o-border-image: linear-gradient(to bottom, red, blue) 1; border-image: linear-gradient(to bottom, red, blue) 1; border-width: 30px; border-style: solid; height: 200px; width: 200px; margin: 0px auto;}

Результат выполнения кода:

Пример . Несколько градиентов

Зададим одновременно два градиента, линейны и радиальный:

#elem background: linear-gradient(to right, red 0px, blue 30px, transparent 30px), radial-gradient(circle closest-side at center, green, transparent);}

Результат выполнения кода:

Пример . Рисуем клеточки как в школьной тетради

Нарисуем клеточки как в школьной тетради. Для этого зададим два повторяющихся градиента под углом в 90 градусов друг к другу:

#elem background: repeating-linear-gradient(transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px); background-position: left top; border: 2px solid yellowgreen;}

Результат выполнения кода:

Пример . Рисуем клеточки с помощью background-size

Предыдущий вариант клеточек не всегда работает корректно. Давайте попробуем другой вариант, с помощью двух обычных (неповторяющихся) градиентов и свойства background-size:

#elem background: linear-gradient(mediumvioletred 0px, mediumvioletred 1px, transparent 1px), linear-gradient(90deg, mediumvioletred 0px, mediumvioletred 1px, transparent 1px); background-size: 10px 10px; background-position: left top; background-repeat: repeat; border: 2px solid mediumvioletred;}

Результат выполнения кода:

Источник: https://theory.phphtml.net/css/linear-gradient.html