How to Blur an Image Without Smudging Edges Using CSS3 Filters?-CSS Tutorial-php.cn

How to Blur an Image Without Smudging Edges Using CSS3 Filters?

Susan Sarandon

Release： 2024-11-21 16:58:09

Original

450 people have browsed it

How to Blur an Image Without Smudging Edges Using CSS3 Filters?

CSS3 Filter: How to Blur Image Without Smudging Edges

When using CSS3 filters to blur images, the edges of the image may also become blurred. This can be undesirable if you want to maintain crisp edges while creating a blur effect.

To address this issue, a clever solution involves placing the image within a

element and adjusting its margins. By setting the overflow property of the

to hidden, you can crop the image to the desired dimensions.

CSS Code:

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;
}

div {
  overflow: hidden;
}

Copy after login

Explanation:

The margin property sets the margins around the image, which offsets the blurred edges by an equal amount.
The overflow: hidden property prevents the image from overflowing beyond the boundaries of the
, creating an effect similar to an inset blur.

Example:

[Live Demo](https://jsfiddle.net/NI3c4/)

HTML:

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

Copy after login

Result:

The image is blurred with defined edges, as the blurred area is contained within the

element.

The above is the detailed content of How to Blur an Image Without Smudging Edges Using CSS3 Filters?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Make Input Fields Span the Entire Width of Their Container? Next article：How can I integrate a Font Awesome icon into a text input field?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn