Can You Blur an Image While Keeping Its Edges Sharp?

Defined Edges with CSS3 Filter Blur Background

Blurring images adds a touch of softness and depth, but it often compromises the sharpness of edges. Can we achieve a blurred effect while preserving crisp outlines?

Solution: Div with Overflow and Negative Margins

CSS:

div {
  overflow: hidden;
}

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

HTML:

<div><img src="image.jpg" /></div>

This solution places the blurred image within a div with hidden overflow. By setting negative margins on the image, we offset it within the div, revealing the original, unblurred edges.

Demo:

[Image of blurred image with defined edges]

How it Works:

• The div prevents the blurred image from spilling beyond its boundaries.
• The negative margins push the image slightly inward, uncovering the unblurred outer edge.
• The blur filter applies to the image, adding depth while leaving the edges intact.

This technique effectively simulates an "inset blur" effect, delivering the desired combination of blur and sharpness.

The above is the detailed content of Can You Blur an Image While Keeping Its Edges Sharp?. For more information, please follow other related articles on the PHP Chinese website!