Skip to main content

Dreamy Blur

One day I saw a few pictures shared by my friend Fish. I was attracted by their slight blur and the subtle glowing effects, and wondered what kind of filter function was used. But then she told me it’s just because the camera lens wasn’t wiped clean. Chengdu. By Fish I really liked this effect, afterwards I tried to create it with CSS, mixing two identical images together with one of them blurred and semi-transparent. Now I look back and find two other ways to do so. Original image I’ll use this photo in the examples below, which was taken in the park last April. Cycling path in the park Blend mode In fact, all those methods are based on the concept of stacking multiple layers like in Photoshop. The first method I mentioned above was to use a blurred layer on top of the original image, and then merged them with mix-blend-mode. Using mix-blend-mode (I learned later from HN comments that the mix-blend-mode is not needed.) Backdrop filter The backdrop-filter property is quite special, it’ll use its underneath layer as the filter source if the background of itself is transparent. And it seems to be able to merge layers automatically. We could reduce one img tag with this approach. Using backdrop-filter SVG filter SVG filter is hard to understand for most people. But once you’ve learned how it works you’ll see how straightforward it is. Step 1 First we need to clone the source image and make it blurry with command feGaussianBlur. In SVG filter, each command will use the output of its previous command as input by default. The head command will use the element which it applies to as the source input. In this case, the original image. Step 2 Continue to adjust the blurred result to make it semi-transparent and a little more bright. By achieving that we use command feComponentTransfer to modify its RGBA channel. Step 3 In the end, merge the transformed result with the original image by using command feBlend. The feBlend command accepts two sources, in2 and the omitted in. The original image is specified with SourceGraphic, while the in is passed by default with the result of its previous command. Of course, we may also give each result a name, which would be more readable. So there is the final result. Using SVG filter Applying the effect The above methods are basically only one that interpreted in different ways. The SVG filter is my favorite since it’s most applicable. I’ve used it once in one of my artwork. #generative #CSS #SVG— yuanchuan (@yuanchuan23) May 27, 2022 Some camera effects will emerge together with the mask property. And I think there are more use cases. Together with mask .with-mask::after { backdrop-filter: blur(5px) brightness(1.3); mask: radial-gradient(circle at 50% 67%, #0006, #000 50%); }  » Read More

Like to keep reading?

This article first appeared on If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?


Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.