Помогите реализовать градиент через css

#css #css3 #градиент

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

Ответы

Ответ 1

body {
  background: url('https://i.stack.imgur.com/7QFOe.png') no-repeat;
  padding: 0;
  margin: 0;
}

.overfade {
  margin-top: 55px;
  height: 50px;
  width: 1280px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-image: 
    linear-gradient(
      to right, 
      rgba(172, 172, 172, 0) 0%, 
      rgba(172, 172, 172, 1) 35%, 
      rgba(172, 172, 172, 1) 65%, 
      rgba(172, 172, 172, 0) 100%), 
    linear-gradient(
      to right, 
      rgba(236, 234, 238, 1) 0%, 
      rgba(236, 234, 238, 1) 50%, 
      rgba(172, 172, 172, 0) 50%, 
      rgba(172, 172, 172, 0) 100%);
  background-position: 0px 55%, 0px 0px;
  background-repeat: no-repeat;
  background-size: 100% 3px, 100% 55%;
}



Ответ 2

в сети есть много сервисом для генерирования градиентов вот например один из них
Ultimate CSS Gradient Generator. В редакторе можно сделать что то на подобие такого 



div {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,000000+89,000000+100&0+0,0.65+9,1+89,0+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',
endColorstr='#00000000', GradientType=1);
  /* IE6-9 */
  height: 300px;
  width: 300px;
}



Ответ 3

что то такое?

background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(209,209,209,1)
9%, rgba(209,209,209,1) 9%, rgba(209,209,209,1) 21%, rgba(209,209,209,1) 34%, rgba(254,254,254,1)
66%, rgba(254,254,254,1) 66%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(209,209,209,1)
9%,rgba(209,209,209,1) 9%,rgba(209,209,209,1) 21%,rgba(209,209,209,1) 34%,rgba(254,254,254,1)
66%,rgba(254,254,254,1) 66%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(209,209,209,1)
9%,rgba(209,209,209,1) 9%,rgba(209,209,209,1) 21%,rgba(209,209,209,1) 34%,rgba(254,254,254,1)
66%,rgba(254,254,254,1) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1
); /* IE6-9 */


Ответ 4

div {
  overflow: hidden;
}

div:before {
  content: "";
  display: block;
  height: 8px;
  margin-top: -4px;
  background: radial-gradient(ellipse at center, silver 0%, transparent 80%);
}