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

Градиент в CSS - это постепенный переход одного цвета в другой между двумя точками.

Линейный градиент linear-gradient

линейный градиент распространяется (чаще сверху вниз) по линии

состоит из двух и более оттенков

<style>
.div {
  background-image: linear-gradient(#ff0000, #ffff00);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

чтобы сделать градиент прозрачным или частично просвечивающим следует применить функцию RGBA. Для перевода из формата HEX в RGB можно воспользоваться этим конвертором
<style>
.div {
  background-image: linear-gradient(rgba(255,0,0,1), rgba(255,255,0,0.7));
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

цвета распределяются пропорционально по всей высоте фона. Через пробел можно указать их точку расположения от границы блока. Не плавные градиенты создаются путём написания одинаковых значений для смежных тонов
<style>
.div {
  background-image: linear-gradient(rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

можно менять направление градиента, если задать градус угла deg или задать после to ключевые слова
[ left | right ] || [ top | bottom ]


<style>
.div {
  background-image: linear-gradient(180deg, rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  /* или */ background-image: linear-gradient(to top, rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

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

радиальный градиент распространяется по окружности

состоит из двух и более оттенков

<style>
.div {
  background-image: radial-gradient(#ff0000, #ffff00);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

чтобы сделать градиент прозрачным или частично просвечивающим следует применить функцию RGBA. Для перевода из формата HEX в RGB можно воспользоваться этим конвертором
<style>
.div {
  background-image: radial-gradient(rgba(255,0,0,1), rgba(255,255,0,0.7));
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

цвета распределяются пропорционально по всей высоте фона. Через пробел можно указать их точку отсчёта. Не плавные градиенты создаются путём написания одинаковых значений для смежных тонов
<style>
.div {
  background-image: radial-gradient(rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

по умолчанию точкой отсчёта является середина at center center. Её можно смещать аналогично background-position. Первое значение определяет расположение по горизонтали, второе - вертикали. Указываются после предлога at в любой единице измерения, в процентах или при использовании ключевых слов
[ left | center | right ] || [ top | center | bottom ]
пощёлкайте по прямоугольнику с градиентом
<style>
.div {
  background-image: radial-gradient(at center center, rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>

по умолчанию окружность имеет вид элипса, но её можно изменить на круг
ellipse circle
потяните за правый нижний угол прямоугольника с градиентом
<style>
.div {
  background-image: radial-gradient(ellipse, rgba(255,0,0,1) -10px, rgba(255,255,0,.7) 50%);
  width: 130px;
  height: 130px;
  border: 1px solid #aaa;
}
</style>

<div class="div"></div>
Синтаксис радиального градиента:
background-image: -XXX-radial-gradient(позиция, форма размер, цвет %, цвет %);
  • contain
    размер принимает значения closest-side (или contain), closest-corner, farthest-side, farthest-corner (или cover).
    
    background: -moz-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
    background: -ms-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
    background: -o-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
    background: -webkit-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
  • c-c
    background: -moz-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -ms-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -o-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -webkit-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
  • f-s
    background: -moz-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
    background: -ms-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
    background: -o-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
    background: -webkit-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
  • cover
    background: -moz-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -ms-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -o-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
    background: -webkit-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);

Как объединить градиенты CSS

В один background-image можно внести несколько фоновых изображений (подробней).
  • изо
    background-color: rgb(125, 167, 22);
    background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -moz-linear-gradient(#FFF, #42aaff);
    background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -ms-linear-gradient(#FFF, #42aaff);
    background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -o-linear-gradient(#FFF, #42aaff);
    background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -webkit-linear-gradient(#FFF, #42aaff); 
    background-repeat: no-repeat; 
    background-position: 0% 0%, 100% 100%;
  • градиенты
    background-color: red;
    background-image: -moz-linear-gradient(transparent, #fff, red), -moz-radial-gradient(transparent, red, #000);
    background-image: -ms-linear-gradient(transparent, #fff, red), -ms-radial-gradient(transparent, red, #000);
    background-image: -o-linear-gradient(transparent, #fff, red), -o-radial-gradient(transparent, red, #000);
    background-image: -webkit-linear-gradient(transparent, #fff, red), -webkit-radial-gradient(transparent, red, #000); 
    background-repeat: no-repeat; 
    background-position: 0% 0%, 100% 100%;

Пример

В качестве примера использования мне понравилась линия, которая появляется под ссылкой при наведении и нажатии на неё.
<style type="text/css">   
#footer-links {
   text-decoration:none;
   background-size: 100% 2px;
   background-repeat: no-repeat;
   background-position: 0 99%;}
 
#footer-links:hover {
   background-image: -webkit-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -moz-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -ms-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -o-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
}
 
#footer-links:active {
   background-image: -webkit-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -moz-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -ms-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -o-linear-gradient(left, #ece2ca, #991500, #ece2ca);
}
  
</style>

<a id="footer-links" href="#">ссылка</a>
background-color: #000; background-image: radial-gradient(90% 50px at 30% 50%, rgba(255,255,255,.6), rgba(0,0,0,0)), linear-gradient(rgba(0,0,0,0), rgba(255,255,255,.3) 50%, #000 50%, rgba(255,255,255,.3) calc(50% + 2px), rgba(255,255,255,.3) calc(50% + 2px), rgba(0,0,0,0));
в f t
наверх ↑

23 комментария:

Андрей
Opera 11.10:
background-image:-o-linear-gradient(top,#000,#FFF);
NMitra
Спасибо большое, Андрей! Добавила замечание в статью.
Анонимный
у вас с версткой беда, код на текст наезжает ff 17.0.1
NMitra
Спасибо! Обязательно исправлю. Это получилось после того, как поменяла дизайн. Не хватает пока времени.
Анонимный
ахахахах на твоей иконке как будто человек со своим членом балуется
NMitra
Такой ассоциации ещё не было. :) Это же фига
Анонимный
Спасибо, очень помогли!
NMitra
Пока не осилила статью )) Чуть-чуть осталось
Анонимный
Спасибо за полезную статью! :)
алексей кленов
Помогите пожалуйста с градиентом самого текста, а не фона
NMitra
Только для Хрома http://css-tricks.com/snippets/css/gradient-text/
Вот пример с тенями http://jsfiddle.net/2GgqR/5/
Oleg Aqausonick
Круто...Что ещё можно сказать..) Я даже попытался всё это объединить на одной своей странице. ) http://tambov-computer.ru/information-for-first-web-developers/207-how-to-make-gradient-in-background-css
ИМХО немного растянуто но всёже круто! :) Спаисбо.
Анонимный
С градиентом удобно работать в онлайн генераторе.
http://www.germansoft.ru/lesson/online/css-generation.php Вот тут например. Есть и образцы работ.Прикольно
NMitra
Вы не правы. Градиенты нужно понять, там не такая уж сложная разметка. А потом можно делать такие вот штуки http://shpargalkablog.ru/2013/02/home-css.html или такие http://shpargalkablog.ru/2011/07/ugol-css.html
Анонимный
В IE не работает( посоветуйте что можно сделать, пожалуйста) спасибо за полезную статью, очень пригодилась)
NMitra
Какая версия IE у вас? Вариант - помимо градиента использовать однотонный цвет.

background-color: red;
background-image: linear-gradient(#ff0000, #ffff00);

Есть ещё @supports. С помощью него можно показать как отображать элемент на устройствах, не поддерживающих градиент.
NMitra
Забыла сказать, раньше вместо linear-gradient использовали изображение jpeg.
phpguru
Познавательно спасибо!
NMitra
Сама как начинаю мучить градиенты, бегу к этой статье :)
Scarlet
Я использую http://gradientgenerator.com Он простой, но содержит все необходимые настройки.
NMitra
Спасибо за инструмент
Анонимный
После: "Синтаксис радиального градиента" - "начинаются чудеса", что в мозиле, что в IE.
NMitra
Спасибо за участие!

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