В этой записи, я расскажу как сделать CSS градиент убывания элемента на странице.

Чтобы примерно понять как это выглядит, вы можете посмотреть картинку выше. Слева и справа у блока края расплываются и кажется как будто бы они полу прозрачные. Я вам расскажу как это сделать с помощью CSS градиента.

Если вам не терпится, то вы можете спуститься вниз и посмотреть демо.

CSS

Я буду использовать псевдоклассы :before и :after, чтобы установить градиент у блога слева и справа.

Установка градиента слева

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

.block-middle:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: -15%;
  background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff), -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
  background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0), #fff), -moz-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
  background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 0), #fff), -ms-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
  background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0), #fff), -o-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
  background-size: 100%;
  z-index: 10;
}

Установки градиента справа

А вот теперь нужно добавить градиент с правой части. Смотреть стиль ниже.

block-middle:after {
  content: " ";
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  right: -15%;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff), -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #fff), -moz-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #fff), -ms-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #fff), -o-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
  z-index: 10;
}

На этом все. Особо сложного в этом ничего нет. Самое главное — это не забудьте установить position: relative для .block-middle — иначе свойство position: absolute не будет держаться границ этого блока.

Если вам нужен полный код данного примера, пожалуйста посмотрите ниже, я предоставил демо специально для вас.