Use These Backdrop Filter Tips for Creating Sites in CSS

Is there anything that cascading style sheets cannot accomplish? In recent years, we have seen a flurry of interesting CSS projects highlighting the endless graphic design abilities of skilled programmers who can create photo-realistic images with nothing but coding. A new wave of CSS artists is emerging, and they are more interested in animations and interactive projects.

If you search for Astrit Malsija on Codepen, you will see that his latest project is a black hole animation partly based on recent findings and research about what these intriguing space objects may look like. Along with the colorful animation, there is an audio loop of the black hole, but it is highly debatable whether sounds could be recorded near these objects. The digital audio file for this CSS animation appears to come from a synthesized sample of a Rolls Royce Phantom engine; nonetheless, the Laser Interferometer Gravitational-Wave Observatory detected a merger of two black holes in May 2019, and the collision of gravitational waves during the observation generated a sound that we may associate with birds chirping.

The underlying CSS trick in the aforementioned animation is a property called "backdrop-filter," which as of November 2020 should be rendered correctly by most modern browsers. This effect can produce blur, contrast, and grayscale filters similar to the control-style property.

In essence, the backdrop-filter-map property returns a single value which can be used to configure the background layer filter. An instance of color-property can be used to determine which filter property to apply to the background-layer attribute.

The advantage of using backdrop-filter is that you no longer have to deal with multiple background elements piled atop other backgrounds; this results in much smoother animations such as the one seen in the accretion disc of the CSS black hole animation.

If you are interested in other space animations that can be coded entirely in CSS and without the burden of JavaScript, search for tutorials on how you can use keyframes plus animation. With transitions, the animation magic is provided by the calc property, which takes care of positioning elements in the vertical and horizontal planes of the web page. For more information click here