Как с помощью CSS нарисовать бекграунд из 4-х плавно переходящих цветов?

260
26 ноября 2016, 18:36

Пример такого изображения. Фон плавно переходит от желтого к голубом, как реализовать такой же переход?

Answer 1
body {
background: linear-gradient(to right, #F00, #0F0, #00F, #000);
}
Answer 2

Как то так вроде

* { 
  margin: 0; 
  padding: 0; 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> 
 
 
  <defs> 
    <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> 
      <stop offset="10%" stop-color="#d9c066" stop-opacity="1" /> 
      <stop offset="90%" stop-color="#6ce7f6" stop-opacity="1" /> 
 
    </linearGradient> 
 
  </defs> 
 
  <rect x="0" y="0" width="500" height="500" rx="0" ry="0" style="fill:url(#myLinearGradient1); stroke: #00500;stroke-width:;" /> 
 
</svg>

READ ALSO
Как сделать обтекание блока слева?
CSS

Как сделать обтекание блока слева?

Сделал общий div для секции с width 100%

 311
Bootstrap. Как блоку дать не стандартную ширину?
CSS

Bootstrap. Как блоку дать не стандартную ширину?

Если я пишу например: width: 240px; (это больше ширины колонки), то при просмотре на меньших разрешениях колонка не центрируетсяЧто делать?

 216
Скруглить углы у видео с ютуба
CSS

Скруглить углы у видео с ютуба

Как можно победить этот моментЗагружаю видео с ютуба на сайт, для родительского элемента задаю border-radius, сразу, при загрузке страницы всё нормально,...

 266
Размер DIV в зависимости от размера окна
CSS

Размер DIV в зависимости от размера окна

Имеем две колонки, левая к примеру 250px, правая в зависимости от размера окна, к примеру до 900px правая колонка 600px, если размер окна более 1100px...

 341