Blur the edges of an image or background image with CSS

Question

I know there are a bunch of new CSS filters and I am wondering if there is a way to apply those to an image or background image   Everything I have read talks about softening the image with a drop shadow  however  a drop shadow is a color  and I want to blur the edges of images so that I could blend them together more seamlessly if they were next to each other   Right now it looks like you can only go with a drop shadow or apply a blur to the entire image  based on what I have read    The closest I can come up with is a semi-transparent box shadow    like this  -webkit-box-shadow  12px 29px 81px 0px rgba 0 0 0 0 75   -moz-box-shadow  12px 29px 81px 0px rgba 0 0 0 0 75   box-shadow  12px 29px 81px 0px rgba 0 0 0 0 75

User · Answer

I m not entirely sure what visual end result you re after  but here s an easy way to blur an image s edge  place a div with the image inside another div with the blurred image   Working example here  http   jsfiddle net ZY5hn 1     HTML    lt div class  placeholder  gt        lt  -- blurred background image for blurred edge -- gt        lt div class  bg-image-blur  gt  lt  div gt        lt  -- same image  no blur -- gt        lt div class  bg-image  gt  lt  div gt        lt  -- content -- gt        lt div class  content  gt Blurred Image Edges lt  div gt   lt  div gt    CSS    placeholder       margin-right  auto      margin-left auto      margin-top  20px      width  200px      height  200px      position  relative         this is the only relevant part for the example         both DIVs have the same image      bg-image-blur   bg-image       background-image  url  http   lorempixel com 200 200 city 9        position absolute      top 0      left 0      width  100       height 100        blur the background  to make blurred edges that overflow the unblurred image that is on top      bg-image-blur       -webkit-filter  blur 20px       -moz-filter  blur 20px       -o-filter  blur 20px       -ms-filter  blur 20px       filter  blur 20px        I added this DIV in case you need to place content inside      content       position  absolute      top 0      left 0      width  100       height  100       color   fff      text-shadow  0 0 3px  000      text-align  center      font-size  30px      Notice the blurred effect is using the image  so it changes with the image color   I hope this helps

User · Answer

lt html gt   lt head gt   lt meta charset  utf-8  gt   lt title gt test lt  title gt    lt style gt   grad1     height  400px    width  600px    background-image  url t1 jpg     Select Image Hare         gradup     height  100     width  100     background  radial-gradient transparent 20   white 70       Set radial-gradient to faded edges        lt  style gt    lt  head gt    lt body gt   lt h1 gt Fade Image Edge With Radial Gradient lt  h1 gt    lt div id  grad1  gt  lt div id  gradup  gt  lt  div gt  lt  div gt    lt  body gt   lt  html gt

User · Answer

If you set the image in div  you also must set both height and width  This may cause the image to lose its proportion  In addition  you must set the image URL in CSS instead of HTML   Instead  you can set the image using the IMG tag  In the container class you can only set the width in percent or pixel and the height will automatically maintain proportion   This is also more effective for accessibility of search engines and reading engines to define an image using an IMG tag    x000D   x000D   container   x000D   margin  auto  x000D   width  200px  x000D   position  relative  x000D    x000D   x000D  img   x000D   width  100   x000D    x000D   x000D   block   x000D   width  100   x000D   position  absolute  x000D   bottom  0px  x000D   top  0px  x000D   box-shadow  inset 0px 0px 10px 20px white  x000D    x000D   lt div class  container  gt  x000D    lt img src  http   lorempixel com 200 200 city  gt  x000D    lt div class  block  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If what you re looking for is simply to blur the image edges you can simply use the box-shadow with an inset   Working example   http   jsfiddle net d9Q5H 1     HTML    lt div class  image-blurred-edge  gt  lt  div gt    CSS   image-blurred-edge       background-image  url  http   lorempixel com 200 200 city 9        width  200px      height  200px         you need to match the shadow color to your background or image border for the desired effect       box-shadow  0 0 8px 8px white inset

[html] Blur the edges of an image or background image with CSS

Examples related to html

Examples related to css

Examples related to filter