Как задать градиент в css background

Градиент на фоновое изображение в Css

Добрый день возник вопрос. Возможно ли применить градиент на фоновую картинку (background-image: url(img/bg.png); от 10% не прозрачности до 100% не прозрачности? )

Отслеживать

Андрей Рождественский

задан 22 фев 2018 в 12:30

Андрей Рождественский Андрей Рождественский

1 2 2 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

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

Отслеживать

ответ дан 22 фев 2018 в 13:55

420 3 3 серебряных знака 13 13 бронзовых знаков

Подобного рода советы принято давать в комментариях: они указывают направление, куда двигаться дальше, но не дают исчерпывающий ответ на вопрос. Если бы в вашем тексте был пример с исходником (вот прям возьмите картинку из вопроса и создайте в ответе сниппет), то да, это был бы ответ. А так — «не является ответом на вопрос».

Как задать градиент у border и сделать его круглым

Есть кнопка и под кнопкой есть фон(картинка), нужно сделать градиент у border и сделать его круглым, и чтобы фон(картинка) была видна.
Здесь фон непрозрачный у div .

.rounded-corners-gradient-borders

Отслеживать
6,343 5 5 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
задан 8 мар 2018 в 17:08
53 1 1 серебряный знак 5 5 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.rounded-corners-gradient-borders < width: 250px; padding: 15px; border-left: 2px solid #f00; border-right: 2px solid #3020ff; background-image: linear-gradient(45deg, #f00, #3020ff), linear-gradient(45deg, #f00, #3020ff); background-size: 100% 2px; background-position: 0 0, 0 100%; background-repeat: no-repeat; border-radius: 35px; text-align: center; font-weight: bold; font-family: Arial; >.img

 
Some text
 
 

Можно попробовать с box-shadow :

.box < width: 250px; margin: 2rem 0; background: transparent; border-radius: 25px; text-align: center; padding: 15px; >.gradient < box-shadow: -2px 0 0 2px rgba(255, 0, 0, 0.8), -2px -2px 0 2px rgba(48, 32, 255, 0.3), -2px 2px 0 2px rgba(48, 32, 255, 1), 0 -2px 0 2px rgba(48, 32, 255, 1), 0 2px 0 2px rgba(48, 32, 255, 1), 2px -2px 0 2px rgba(48, 32, 255, 1), 2px 2px 0 2px rgba(48, 32, 255, 1), 2px 0 0 2px rgba(255, 0, 0, 1); >img

Some text
  

Отслеживать
ответ дан 8 мар 2018 в 17:45
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
Спасибо, это очень похоже!)
9 мар 2018 в 18:48
@Maks, был рад помочь:)
9 мар 2018 в 18:51

* < box-sizing:border-box; >body < margin:0; background:linear-gradient(to right, #ddd,#cda); min-height:100vh; >.btn < display:inline-block; position:relative; padding:0 15px; text-align:center; width:200px; line-height:40px; cursor:pointer; user-select:none; font-weight:bold; >.btn__border < position:absolute; top:0; left:0; width:100%; height:100%; >.btn__border rect < fill:none; stroke:url(#gradient); stroke-width:3px; width:calc(100% - 6px); height:calc(100% - 6px); >.btn:hover rect

  
  Кнопка 
 
  Ещё кнопка 

Отслеживать
ответ дан 10 мар 2018 в 7:05
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

2.16. CSS-градиент

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

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

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

Как сделать градиент в CSS

• Содержание:
• 1. Линейный градиент: linear-gradient()
• 2. Радиальный градиент: radial-gradient()
• 3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
• 4. Кроссбраузерный градиент
• 5. Комбинация градиента и фонового изображения

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

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()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значение	Описание
closest-side	Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse .
farthest-side	Размер рассчитывается из расстояния до дальних сторон.
closest-corner	Размер рассчитывается из расстояния до ближних углов.
farthest-corner	Размер рассчитывается из расстояния до дальних углов.

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

Мяч

Кнопка

.wrap < height: 200px; padding: 50px 0; background: #cccccc; >.button

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

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

.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

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

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

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

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

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

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

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

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

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

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

Повтор радиального градиента

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

5. Комбинация градиента и фонового изображения

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

Как задать градиент в css background

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

Для создания градиентов используется функция градиента — linear-gradient() или radial-gradient() , которая применяется к свойству background или background-color .

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

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

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

Линейный градиент создается с помощью функции linear-gradient() . Равномерное распределение цветов градиента создается следующим способом:

Направление градиента можно задавать также с помощью угла наклона (deg), например:

Для неравномерного распределения цветов нужно указать позицию начала каждого цвета через точки остановки градиента (color stops).

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

Чтобы нарисовать ровные полосы, можно воспользоваться следующими конструкциями:

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

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

Градиенту можно придать форму эллипса, изменяя пару значений, идущих после формы градиента, заданных в % или px, например background: radial-gradient(55% 65%, blue, green, yellow) . Первое значение задает размер по оси Х, второе — по оси Y.

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

Значение	Описание
closest-side	Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ).
farthest-side	Размер рассчитывается из расстояния до дальних сторон.
closest-corner	Размер рассчитывается из расстояния до ближних углов.
farthest-corner	Размер рассчитывается из расстояния до дальних углов.

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

Повтор градиента задается с помощью двух функций: repeating-linear-gradient() и repeating-radial-gradient()

CSS gradient генератор

Времена, когда сделать градиент на сайте можно было только с использованием картинок давно прошли. Теперь достаточно просто создавать градиенты внутри CSS стилей.

Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:

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

Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .

Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.

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

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

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

Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .

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

К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:

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

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

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

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

Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.

Мы получаем такой эффект:

Градиент в тексте

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

Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.

Несколько слов о градиентах

Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.

Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов — это некий тренд.

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

Давайте, для галочки, вспомним, что такое градиент.

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

Форма записи градиентов в css

Давайте коротко рассмотрим, из чего же состоит классический градиент.

Градиент может быть записан двумя способами:

Какую форму записи использовать — решать вам.

В коде, приведенном выше, мы указали три значения свойств background:

• 1. То, каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
• 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ], где угол измеряется в deg, то есть — градус, или вторым способом — указанием позиции от и до. Например, to top, to right, to bottom left и т.д.
• Значение цвета #******, которым будет начинаться и заканчиваться градиент.

Написание цвета градиентов

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

• Hex Color Code — #000000 или сокращением #000;
• RGB Color Code — rgb(0, 0, 0);
• Color Name — black;
• HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

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

Градиенты с изображениями

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

В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).

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

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

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

• background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
• mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
• isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели — паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background

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

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:
.circles-background

Результат превосходит все ожидания,

Эффект ночного видения

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

Возьмем обычное изображение

и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient
.night-vision-effect

И вот результат.

Сайты-генераторы градиентов

Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

CSS: Линейный градиент для фона

Градиент — заполнение выделенной области последовательностью цветовых оттенков с плавными переходами между ними. Градиент используется для отображения плавного перехода между двумя или более указанными цветовыми оттенками. Пример градиента:

Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги — подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

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

• Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
• Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.

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

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

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

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

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

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

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

Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.

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

Пример градиента заданного в разных направлениях:

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

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

Похожие публикации:

1. Как выровнять содержимое контейнера по центру css
2. Как задать цвет ссылки в css
3. Как скрыть элемент css
4. Как создать блок в html css