Blur filter в CSS

как задать blur filter на чистом css div'у с background: url() только в пределах другого div?
Пример на фото, через filter: blur(10px) получаются нечёткие границы размытия

Ответ

Оберните div со свойством blur в div со свойством overflow:hidden :
.parent{ background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; height:200px; padding:50px 0; } .inner{ overflow:hidden; } .blur{ background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; height:100px; filter: blur(10px); }