Проблема с линейным градиентом на границах объекта css html

Рейтинг: 0Ответов: 1Опубликовано: 03.03.2025

столкнулся с такой проблемой, что на сайте уже имеется задний фон, при этом на кнопку нужно добавить градиент на границы объекта, но на самой кнопке нужен блюр заднего фона. Как это можно реализовать?

Уточню вопрос на всякий случай, изображение на заднем фоне убрать нельзя. Надо либо обойти наложение блюра на градиент, либо убрать градиент за кнопку (цвет на кнопку накладывать нельзя - блок должен быть только с блюром)

Любые методы решения подойдут

Пример:

.container {
  margin-top: 50px;
  margin-left: 50px;
  height: 500px;
  width: 500px;
  background-image: url(https://img51994.kanal-o.ru/img/2024-09-09/fmt_81_24_shutterstock_2141488197.jpg);
  position: relative;
  display: flex;
}

.container .button {
  margin-top: 150px;
  margin-left: 150px;
  height: 100px;
  width: 100px;
  backdrop-filter: blur(50px);
  border-radius: 16px;
  border: none;
  background: none;
}

.container .button button {
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 16px;
  outline: none;
  cursor: pointer;
  background: none;
}

.container .button button::after {
  content: '';
  width: 105%;
  height: 105%;
  position: absolute;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
  top: -2%;
  left: -2%;
  border-radius: 16px;
}
<div class="container">
  <div class="block button">
    <button>Button</button>
  </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

У вас там несколько ошибок в контексте того, что вы пытаетесь сделать, и главная из них — это бессмысленное позиционирование button:before по отношению ко всему документу.

Давайте попробуем более простой и правильный путь (: Уберём у button дефалтные background и border а в вашем css и html всё лишнее и... сместим всю магию в :before.

.container {
  height: 500px;
  width: 500px;
  background-image: url(https://img51994.kanal-o.ru/img/2024-09-09/fmt_81_24_shutterstock_2141488197.jpg);
}

button {
  margin-top: 150px;
  margin-left: 277px;

  background: none;
  border: initial;

  height: 100px;
  width: 100px;
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(6px);
  border-radius: 18px;
}

button::after {
  content: '';
  position: absolute;
  padding: 8px;
  border-radius: 18px;
  inset: 0;
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
  background: linear-gradient(45deg, #ff000050 0%, #0000ff50 100%);
}
<div class="container">
  <button>Button</button>
</div>