Как создать градиентный фон на всю web страницу?

#css #css3 #изображения #оптимизация #background

Подскажите, пожалуйста, реально ли градиентами (или какой другой технологией) сделать
фоновое изображение - подложку для всей страницы.
 Я пробовал через radial gradient, но  пока нужного результата не вышло (просто фото
идет как background-image на всё body и не хочется 3мБ вбрасывать, а при сжатии данного
фото теряю в качестве) самая большая проблема с облачками.    


    

Ответы

Ответ 1

Как вариант решения 



html,body{
  background:#222;
  height:100%;
}
.body_elem{
  height:100%;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to left,#111,#221c44);
  filter:blur(10px);
}
.elem1{
  width:50%;
  height:50%;
  border-radius:30em/19em;
    background:linear-gradient(to left,#111,#221c44);
  transform:rotate(30deg)translateY(90px);
  filter:blur(40px);
}
.elem1-1{
  width:100px;
  height:20px;
  background:#fff;
  transform:translate(205px,105px);
  filter:blur(50px);
}
.elem2{
  width:50%;
  height:50%;
  border-radius:30em/19em;
    background:linear-gradient(to left,#111,#221c44);
  transform:rotate(-20deg)translateY(-80px);
  filter:blur(10px);
  float:right;
}
.elem2-1{
  width:200px;
  height:300px;
  background:#222;
  transform:rotate(80deg);
  border-radius:80em/30em;
  filter:blur(100px
  );
}

.body-elem-2{
  position: absolute;
  top:0;
  left:0; right:0;
  width:80%;
  margin:auto;
}
h2{
  color:#fff;
  font-family:Verdana, serif;
  font-size:2em;
}
.body-elem-2 p{
  color:#fbfbfb;
  font-size:1.4em;
  font-family:"Times New Roman", sans-serif;
}
img{
  display:block;
  margin:auto;
}


  



  





  
New post
  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis hic nostrum totam,
eius illo magnam alias eveniet, qui laborum dolores fuga pariatur sapiente aperiam
quae, blanditiis atque. Minima, quasi veniam?
  
  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, esse eveniet
nam autem recusandae quas voluptates totam eligendi dolorum. Cum, dolorem rerum ullam,
cumque ad fuga quas incidunt eum laboriosam blanditiis, nesciunt fugit pariatur perferendis
nemo distinctio aspernatur animi ratione!