Интересно про градиенты

Question

Я использую div блок с линейным градиентом как границу для внутреннего блока с контентом. Идея в том, что задний див (родительский) чуть больше внутреннего, и своей градиентной заливкой делает бордер для внутреннего блока с эффектом blur, но блюр примененный к родителю блюрит и дочерние элементы тоже.

Я вижу выход такой, сделать SVG с нужным мне градиентом и блюром, и сделать его бэкграундом для внешнего дива. Как я могу это сделать, если есть идеи, как сделать по другому, буду очень рад.

Код можете глянуть внутри:

.grid-item-container {
  display: grid;
  justify-content: center;
  align-content: center;
  position: relative;
  margin: 0.75vh 0.50vw;
  border-radius: 1.25vh;
  background-color: #000;
  transition: all .3s ease-out;
}

.grid-item-container:hover {
  z-index: 10;
  transform: translateX(1vw) scale(1.05);
  background: linear-gradient(to top left, #ff0062, rgba(255, 153, 150, 0), #ff1e00), linear-gradient(to top right, #0800ff, rgba(255, 153, 150, 0), #1a8dff);
}

.grid-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin: 0.65vh;
  width: calc(100% - 1.25vh);
  height: calc(100% - 1.25vh);
  border-radius: inherit;
  background-color: #000;
  perspective: 1000px;
}

<div class="grid-item-container logo">
  <div class="grid-item-content front" id="logo"></div>
  <div class="grid-item-content back">Hello!</div>
</div>

Answer 1

Не очень понял задачу.

Может, вам что-то такое надо?

.container {
  border: 2px solid gray;
  position: relative;
}

.content {}

.container:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  display: block;
  background: linear-gradient(to top, #fff, transparent);
}

<div class="container">
  <div class="content">Content here<br>Content here<br>Content here<br>Content here<br>Content here<br>Content here<br>Content here<br>Content here<br>Content here<br></div>
</div>

Answer 2

Я понял о чем вы, можно попытаться что-то выдумать прибегая к помощи псевдоэлементов.

Вообще, есть похожее на filter свойство - backdrop-filter и вот как раз оно должно бы нам подойти но почемуто-то в моём примере оно не хочет работать ну никак, второй минус его не поддерживает Firefox.

А с помощью псевдоэлементов например так - codepen example

БЛОГ НА HUSL

Интересно про градиенты

Ответы (2 шт):