Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
backdrop-filter

6 Articles
{
,

}
Direct link to the article Icon Glassmorphism Effect in CSS
backdrop-filter background-clip element() emoji filter hsl mask-clip navigation

Icon Glassmorphism Effect in CSS

I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time …

Avatar of Ana Tudor
Ana Tudor on Nov 8, 2021
Direct link to the article Backdrop Filter effect with CSS
backdrop-filter

Backdrop Filter effect with CSS

I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter.…

Avatar of Geoff Graham
Geoff Graham on Jul 16, 2020
Direct link to the article A Glassy (and Classy) Text Effect
apple backdrop-filter clip-path

A Glassy (and Classy) Text Effect

The landing page for Apple Arcade has a cool effect where some “white” text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It’s not like knockout text…

Avatar of Chris Coyier
Chris Coyier on Aug 29, 2019
Direct link to the article backdrop-filter
backdrop-filter filter

backdrop-filter

The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are …

Avatar of Andy Adams
Andy Adams on Aug 2, 2019 (Updated on Aug 19, 2021)
Direct link to the article Apply a Filter to a Background Image
backdrop-filter background-blend-mode filter grayscale

Apply a Filter to a Background Image

You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It’s weirdly tricky.

There are CSS properties that specific …

Avatar of Chris Coyier
Chris Coyier on Oct 2, 2018
Direct link to the article The backdrop-filter CSS property
backdrop-filter filter

The backdrop-filter CSS property

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or …

Avatar of Robin Rendle
Robin Rendle on May 16, 2018

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top