Backdrop filters

As previously seen on macOS, Apple.com, and Windows Vista, Backdrop filters create dynamic blurring and color effects on the area behind elements. In this lesson, Grímur will show how to add blur to an element using Backdrop filters in Webflow.

Remember to make sure that content is still legible without the Backdrop filter.

Video details

Duration

0:58

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Backdrop filters",
  "description": "As previously seen on macOS, Apple.com, and Windows Vista, Backdrop filters create dynamic blurring and color effects on the area behind elements. In this lesson, Grímur will show how to add blur to an element using Backdrop filters in Webflow.",
  "url": "https://university.webflow.com/videos/backdrop-filters",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b9445ccbfc66010419cb3f_6194add55708a00688ff4271_YT-thumbnail.webp",
  "duration": "0:58",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=ZOanF9DfDu0",
  "embedUrl": "https://www.youtube.com/embed/ZOanF9DfDu0",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}