Кнопка с половиной изображения и половиной размытого градиента плавно слияет ⇐ CSS

[Anonymous]

Как разработать эту кнопку, я проделал некоторую работу. Но у меня есть проблема, это размыто, и ясно видна линия вырезания изображений, что не требуется. Я хочу слияние плавно смешанного изображения и размытого класса. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

.blend-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20rem;
height: 6rem;
border: none;
border-radius: 20px;
overflow: hidden;

/* bottom layer: your image */
background: url("https://picsum.photos/300/300") no-repeat;
background-size: 60% 100%;
color: white;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
}

/* 1) Blur the right half  */
.blend-button::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;

backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

.blend-button::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 80%;
height: 100%;

background: linear-gradient(to left,
rgba(112, 76, 52, 0.3),
/* adjust to your “solid” color */
rgba(112, 76, 52, 0)
/* fully transparent */
);
}

.blend-button span {
position: relative;
z-index: 1;
text-align: center;
}< /code>

Testing

Подробнее здесь: https://stackoverflow.com/questions/795 ... thly-merge