diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
index 6cbd028..b626d20 100644
--- a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
+++ b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
@@ -171,7 +171,7 @@ Tailwind utility | Slipstream modifier
 [Invert](https://tailwindcss.com/docs/invert) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Saturate](https://tailwindcss.com/docs/saturate) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Sepia](https://tailwindcss.com/docs/sepia) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Backdrop Blur](https://tailwindcss.com/docs/backdrop-blur) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Backdrop Blur](https://tailwindcss.com/docs/backdrop-blur) | ``View/background(_:condition:)-89gyc``
 [Backdrop Brightness](https://tailwindcss.com/docs/backdrop-brightness) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Backdrop Contrast](https://tailwindcss.com/docs/backdrop-contrast) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Backdrop Grayscale](https://tailwindcss.com/docs/backdrop-grayscale) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamforSwiftUIDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamforSwiftUIDevelopers.md
index 4215be8..0ef7aed 100644
--- a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamforSwiftUIDevelopers.md
+++ b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamforSwiftUIDevelopers.md
@@ -126,6 +126,19 @@ var body: some View {
 }
 ```
 
+## Materials
+
+SwiftUI and Slipstream both provide the ability to apply material backgrounds to views.
+
+### Offset
+
+```swift
+var body: some View {
+  Text("Blurred background")
+    .background(.ultraThin)
+}
+```
+
 ## Sizing
 
 SwiftUI and Slipstream both provide a
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/Filters/Filters-BackdropBlur.md b/Sources/Slipstream/Documentation.docc/TailwindCSS/Filters/Filters-BackdropBlur.md
new file mode 100644
index 0000000..edaff79
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/TailwindCSS/Filters/Filters-BackdropBlur.md
@@ -0,0 +1,13 @@
+# Backdrop blur
+
+Utilities for applying backdrop blur filters to an element.
+
+## Topics
+
+### Modifiers
+
+- ``View/background(_:condition:)-89gyc``
+
+### Supporting types
+
+- ``Material``
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md b/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md
index 2f4ab87..aa5d4d0 100644
--- a/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md
+++ b/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md
@@ -51,6 +51,10 @@ Slipstream implementations of Tailwind CSS's utility classes.
 - <doc:Borders-Border>
 - <doc:Borders-CornerRadius>
 
+### Filters
+
+- <doc:Filters-BackdropBlur>
+
 ### Transitions and animations
 
 - <doc:TransitionsAndAnimations-Animation>
diff --git a/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift b/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift
index 0d38a7f..8d09f33 100644
--- a/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift
+++ b/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift
@@ -92,6 +92,14 @@ extension View {
     modifier(TailwindClassModifier(add: "bg-\(color.toTailwindColorClass())", condition: condition))
   }
 
+  /// Sets the background material of the view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [backdrop blur](https://tailwindcss.com/docs/backdrop-blur) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func background(_ material: Material, condition: Condition? = nil) -> some View {
+    modifier(TailwindClassModifier(add: "backdrop-blur\(material.rawValue)", condition: condition))
+  }
+
   /// Sets the background color to a specific Tailwind CSS palette.
   ///
   /// - Parameters:
diff --git a/Sources/Slipstream/TailwindCSS/Material.swift b/Sources/Slipstream/TailwindCSS/Material.swift
new file mode 100644
index 0000000..9c30d33
--- /dev/null
+++ b/Sources/Slipstream/TailwindCSS/Material.swift
@@ -0,0 +1,16 @@
+/// Constants that define a background material type.
+///
+/// - SeeAlso: Tailwind CSS' [`backdrop blur`](https://tailwindcss.com/docs/backdrop-blur) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum Material: String {
+  case ultraThin = "-sm"
+  case thin = ""
+  case regular = "-md"
+  case thick = "-lg"
+  case ultraThick = "-xl"
+
+  // MARK: Tailwind CSS-specific filters
+
+  case ultraUltraThick = "-2xl"
+  case ultraUltraUltraThick = "-3xl"
+}
diff --git a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundColorTests.swift b/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundColorTests.swift
deleted file mode 100644
index cd9b6e4..0000000
--- a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundColorTests.swift
+++ /dev/null
@@ -1,22 +0,0 @@
-import Foundation
-import Testing
-
-import Slipstream
-
-struct BackgroundColorTests {
-  @Test func color() throws {
-    try #expect(renderHTML(Div {}.background(.black)) == #"<div class="bg-black"></div>"#)
-    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
-    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
-  }
-
-  @Test func colorWithDarkness() throws {
-    try #expect(renderHTML(Div {}.background(.cyan, darkness: 500)) == #"<div class="bg-cyan-500"></div>"#)
-  }
-
-  @Test func colorWithOpacity() throws {
-    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0))) == #"<div class="bg-cyan-500/0"></div>"#)
-    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0.5))) == #"<div class="bg-cyan-500/50"></div>"#)
-    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(20))) == #"<div class="bg-cyan-500"></div>"#)
-  }
-}
diff --git a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundImageTests.swift b/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift
similarity index 51%
rename from Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundImageTests.swift
rename to Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift
index 21cf690..a55efda 100644
--- a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundImageTests.swift
+++ b/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift
@@ -4,6 +4,26 @@ import Testing
 import Slipstream
 
 struct BackgroundImageTests {
+  // MARK: - Color backgrounds
+
+  @Test func color() throws {
+    try #expect(renderHTML(Div {}.background(.black)) == #"<div class="bg-black"></div>"#)
+    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
+    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
+  }
+
+  @Test func colorWithDarkness() throws {
+    try #expect(renderHTML(Div {}.background(.cyan, darkness: 500)) == #"<div class="bg-cyan-500"></div>"#)
+  }
+
+  @Test func colorWithOpacity() throws {
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0))) == #"<div class="bg-cyan-500/0"></div>"#)
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0.5))) == #"<div class="bg-cyan-500/50"></div>"#)
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(20))) == #"<div class="bg-cyan-500"></div>"#)
+  }
+
+  // MARK: - Image backgrounds
+
   @Test func justURL() throws {
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"))) == #"<div class="bg-[url('/logo.png')]"></div>"#)
   }
@@ -23,4 +43,16 @@ struct BackgroundImageTests {
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"), size: .cover)) == #"<div class="bg-[url('/logo.png')] bg-cover"></div>"#)
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"), size: .size(width: 100, height: 50))) == #"<div class="bg-[length:100px_50px] bg-[url('/logo.png')]"></div>"#)
   }
+
+  // MARK: - Material backgrounds
+
+  @Test func material() throws {
+    try #expect(renderHTML(Div {}.background(.ultraThin)) == #"<div class="backdrop-blur-sm"></div>"#)
+    try #expect(renderHTML(Div {}.background(.thin)) == #"<div class="backdrop-blur"></div>"#)
+    try #expect(renderHTML(Div {}.background(.regular)) == #"<div class="backdrop-blur-md"></div>"#)
+    try #expect(renderHTML(Div {}.background(.thick)) == #"<div class="backdrop-blur-lg"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraThick)) == #"<div class="backdrop-blur-xl"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraUltraThick)) == #"<div class="backdrop-blur-2xl"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraUltraUltraThick)) == #"<div class="backdrop-blur-3xl"></div>"#)
+  }
 }