4

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

1
  • Он таким тонким и будет?
    – Qwertiy
    12 ноя 2018 в 16:59

4 ответа 4

2

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%;
}
<div class="overfade"></div>

1

в сети есть много сервисом для генерирования градиентов вот например один из них 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;
}
<div></div>

2
  • Спасибо за ответ, но дело не в самом градиенте, а именно в равномерном исчезновение градиента по краям 11 сен 2018 в 20:33
  • поиграйтесь с сервисом, там все можно сделать. на картинке, которую Вы скинули скорее всего радиальный градиент с переходом от серого к прозрачному
    – slowBro
    12 сен 2018 в 7:31
1

что то такое?

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 */
3
  • по краям нету прозрачности 9 сен 2018 в 14:42
  • Ну так почитайте, как это исправить, я вам показал направление. 9 сен 2018 в 17:16
  • Спасибо что показали направление и я вам благодарен за ответ, но это не такая простая задача как кажется, я пробывал использовать css свойство mask но с ним не получался нужный ефект, поэтому и обратился сюда, так как не знал куда еще можно обратится. В интернете ничего не нашел 11 сен 2018 в 20:31
1

div {
  overflow: hidden;
}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.