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

16.05.2013 16.05.2013 NMitra

Градиент в 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>

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUo4xmcX9qI43bnrWTsNNqYTnUoEuyI6Go6KSBuKMYEzp-7jNtJTTQQJgQEByEyt_zQB29ai3m1AJcq-gMYYVkbAo5FipAW9XBsQwra79nZEEnHdD27MhJ9vOzdd0N58cpgBiZhpFFC_b/s72-c/Logo-Blogger.png"), -moz-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUo4xmcX9qI43bnrWTsNNqYTnUoEuyI6Go6KSBuKMYEzp-7jNtJTTQQJgQEByEyt_zQB29ai3m1AJcq-gMYYVkbAo5FipAW9XBsQwra79nZEEnHdD27MhJ9vOzdd0N58cpgBiZhpFFC_b/s72-c/Logo-Blogger.png"), -ms-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUo4xmcX9qI43bnrWTsNNqYTnUoEuyI6Go6KSBuKMYEzp-7jNtJTTQQJgQEByEyt_zQB29ai3m1AJcq-gMYYVkbAo5FipAW9XBsQwra79nZEEnHdD27MhJ9vOzdd0N58cpgBiZhpFFC_b/s72-c/Logo-Blogger.png"), -o-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUo4xmcX9qI43bnrWTsNNqYTnUoEuyI6Go6KSBuKMYEzp-7jNtJTTQQJgQEByEyt_zQB29ai3m1AJcq-gMYYVkbAo5FipAW9XBsQwra79nZEEnHdD27MhJ9vOzdd0N58cpgBiZhpFFC_b/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)); https://css-tricks.com/easing-linear-gradients/

в f t

наверх ↑

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

Андрей: Opera 11.10:
background-image:-o-linear-gradient(top,#000,#FFF);
NMitra: Спасибо большое, Андрей! Добавила замечание в статью.
Анонимный: у вас с версткой беда, код на текст наезжает ff 17.0.1
NMitra: Спасибо! Обязательно исправлю. Это получилось после того, как поменяла дизайн. Не хватает пока времени.
Анонимный: ахахахах на твоей иконке как будто человек со своим членом балуется
NMitra: Такой ассоциации ещё не было. :) Это же фига
Анонимный: Спасибо, очень помогли!
NMitra: Пока не осилила статью )) Чуть-чуть осталось
Анонимный: Спасибо за полезную статью! :)
Unknown: Помогите пожалуйста с градиентом самого текста, а не фона
NMitra: Только для Хрома http://css-tricks.com/snippets/css/gradient-text/
Вот пример с тенями http://jsfiddle.net/2GgqR/5/
Unknown: Круто...Что ещё можно сказать..) Я даже попытался всё это объединить на одной своей странице. ) 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: Спасибо за участие!

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

Извините, комментарии в рамках данной статьи не предусмотрены.