Home >Web Front-end >CSS Tutorial >How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

Barbara StreisandOriginal: 2024-11-16 14:10:03302browse

Achieving Defined Edges with CSS3 Filter Blur

When applying a blur effect to an image using the CSS filter property, a common issue arises: the edges of the image also become blurred. This can result in an undesirable outcome, particularly when sharp lines or details need to be preserved.

To resolve this problem and maintain defined edges, a clever technique can be employed. By placing the blurred image within a

element and applying certain CSS styles, it's possible to create an "inset blur" effect.

The following code snippet demonstrates how to achieve this effect:

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

In this code, the element is contained within a

with overflow set to hidden. This ensures that the blurred image is cropped at the edges of the

, eliminating the spillover of the blur effect into the surroundings.

Furthermore, negative margins are applied to the element to slightly shift it within the

. The values of these margins can be adjusted to create the desired amount of blur while preserving the edges.

This technique effectively creates a defined blur effect, keeping the edges of the image sharp while softening the details within.

The above is the detailed content of How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?. For more information, please follow other related articles on the PHP Chinese website!

css css3 while Filter using Property this overflow issue

Statement：

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

Previous article：How Can I Customize the Color Input Box in Webkit Browsers?Next article：How Can I Customize the Color Input Box in Webkit Browsers?

See more

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

Related articles