diff --git a/Sources/TokamakCore/Modifiers/StyleModifiers.swift b/Sources/TokamakCore/Modifiers/StyleModifiers.swift
index d2271a887..7d691a1b5 100644
--- a/Sources/TokamakCore/Modifiers/StyleModifiers.swift
+++ b/Sources/TokamakCore/Modifiers/StyleModifiers.swift
@@ -66,16 +66,42 @@ public extension View {
   ) -> some View where V: View {
     background(content(), alignment: alignment)
   }
+}
+
+@frozen public struct _BackgroundShapeModifier<Style, Bounds>: ViewModifier, EnvironmentReader
+  where Style: ShapeStyle, Bounds: Shape
+{
+  public var environment: EnvironmentValues!
+
+  public var style: Style
+  public var shape: Bounds
+  public var fillStyle: FillStyle
 
+  @inlinable
+  public init(style: Style, shape: Bounds, fillStyle: FillStyle) {
+    self.style = style
+    self.shape = shape
+    self.fillStyle = fillStyle
+  }
+
+  public func body(content: Content) -> some View {
+    content
+      .background(shape.fill(style, style: fillStyle))
+  }
+
+  public mutating func setContent(from values: EnvironmentValues) {
+    environment = values
+  }
+}
+
+public extension View {
   @inlinable
   func background<S, T>(
     _ style: S,
     in shape: T,
     fillStyle: FillStyle = FillStyle()
   ) -> some View where S: ShapeStyle, T: Shape {
-    background {
-      shape.fill(style, style: fillStyle)
-    }
+    modifier(_BackgroundShapeModifier(style: style, shape: shape, fillStyle: fillStyle))
   }
 
   @inlinable
@@ -83,7 +109,7 @@ public extension View {
     in shape: S,
     fillStyle: FillStyle = FillStyle()
   ) -> some View where S: Shape {
-    background(ForegroundStyle(), in: shape, fillStyle: fillStyle)
+    background(BackgroundStyle(), in: shape, fillStyle: fillStyle)
   }
 }
 
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift b/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift
new file mode 100644
index 000000000..c2dd4fe7a
--- /dev/null
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift
@@ -0,0 +1,79 @@
+// Copyright 2020-2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/6/21.
+//
+
+public struct BackgroundStyle: ShapeStyle {
+  public init() {}
+
+  public func _apply(to shape: inout _ShapeStyle_Shape) {
+    if let backgroundStyle = shape.environment._backgroundStyle {
+      backgroundStyle._apply(to: &shape)
+    } else {
+      shape.result = .none
+    }
+  }
+
+  public static func _apply(to shape: inout _ShapeStyle_ShapeType) {}
+}
+
+extension EnvironmentValues {
+  private struct BackgroundStyleKey: EnvironmentKey {
+    static let defaultValue: AnyShapeStyle? = nil
+  }
+
+  public var _backgroundStyle: AnyShapeStyle? {
+    get {
+      self[BackgroundStyleKey.self]
+    }
+    set {
+      self[BackgroundStyleKey.self] = newValue
+    }
+  }
+}
+
+public extension View {
+  @inlinable
+  func background() -> some View {
+    modifier(_BackgroundStyleModifier(style: BackgroundStyle()))
+  }
+
+  @inlinable
+  func background<S>(_ style: S) -> some View where S: ShapeStyle {
+    modifier(_BackgroundStyleModifier(style: style))
+  }
+}
+
+@frozen public struct _BackgroundStyleModifier<Style>: ViewModifier, EnvironmentModifier,
+  EnvironmentReader
+  where Style: ShapeStyle
+{
+  public var environment: EnvironmentValues!
+  public var style: Style
+
+  @inlinable
+  public init(style: Style) {
+    self.style = style
+  }
+
+  public typealias Body = Never
+  public mutating func setContent(from values: EnvironmentValues) {
+    environment = values
+  }
+
+  public func modifyEnvironment(_ values: inout EnvironmentValues) {
+    values._backgroundStyle = .init(styles: [style, style, style], environment: values)
+  }
+}
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift b/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
index 8efcfb13b..892489bb8 100644
--- a/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
@@ -28,3 +28,56 @@ public struct ForegroundStyle: ShapeStyle {
 
   public static func _apply(to shape: inout _ShapeStyle_ShapeType) {}
 }
+
+extension EnvironmentValues {
+  private struct ForegroundStyleKey: EnvironmentKey {
+    static let defaultValue: AnyShapeStyle? = nil
+  }
+
+  public var _foregroundStyle: AnyShapeStyle? {
+    get {
+      self[ForegroundStyleKey.self]
+    }
+    set {
+      self[ForegroundStyleKey.self] = newValue
+    }
+  }
+}
+
+public extension View {
+  @inlinable
+  func foregroundStyle<S>(_ style: S) -> some View
+    where S: ShapeStyle
+  {
+    foregroundStyle(style, style, style)
+  }
+
+  @inlinable
+  func foregroundStyle<S1, S2>(_ primary: S1, _ secondary: S2) -> some View
+    where S1: ShapeStyle, S2: ShapeStyle
+  {
+    foregroundStyle(primary, secondary, secondary)
+  }
+
+  @inlinable
+  func foregroundStyle<S1, S2, S3>(_ primary: S1, _ secondary: S2,
+                                   _ tertiary: S3) -> some View
+    where S1: ShapeStyle, S2: ShapeStyle, S3: ShapeStyle
+  {
+    modifier(_ForegroundStyleModifier(styles: [primary, secondary, tertiary]))
+  }
+}
+
+@frozen public struct _ForegroundStyleModifier: ViewModifier, EnvironmentModifier {
+  public var styles: [ShapeStyle]
+
+  @inlinable
+  public init(styles: [ShapeStyle]) {
+    self.styles = styles
+  }
+
+  public typealias Body = Never
+  public func modifyEnvironment(_ values: inout EnvironmentValues) {
+    values._foregroundStyle = .init(styles: styles, environment: values)
+  }
+}
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/Material.swift b/Sources/TokamakCore/Shapes/ShapeStyles/Material.swift
new file mode 100644
index 000000000..75cf279b3
--- /dev/null
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/Material.swift
@@ -0,0 +1,57 @@
+// Copyright 2020-2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/6/21.
+//
+
+public struct Material {
+  private let style: _MaterialStyle
+
+  private init(_ style: _MaterialStyle) {
+    self.style = style
+  }
+
+  public static let regular = Self(.regular)
+  public static let thick = Self(.thick)
+  public static let thin = Self(.thin)
+  public static let ultraThin = Self(.ultraThin)
+  public static let ultraThick = Self(.ultraThick)
+}
+
+public enum _MaterialStyle {
+  case regular
+  case thick
+  case thin
+  case ultraThin
+  case ultraThick
+}
+
+extension Material: ShapeStyle {
+  public func _apply(to shape: inout _ShapeStyle_Shape) {
+    shape.result = .resolved(
+      .foregroundMaterial(
+        _ColorProxy(Color._withScheme {
+          $0 == .light ? Color.white : Color.black
+        }).resolve(in: shape.environment),
+        style
+      )
+    )
+  }
+
+  public static func _apply(to shape: inout _ShapeStyle_ShapeType) {}
+}
+
+public extension Material {
+  static let bar = Self.regular
+}
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/ShapeStyle.swift b/Sources/TokamakCore/Shapes/ShapeStyles/ShapeStyle.swift
index b50ef276b..43e49e743 100644
--- a/Sources/TokamakCore/Shapes/ShapeStyles/ShapeStyle.swift
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/ShapeStyle.swift
@@ -127,8 +127,7 @@ public struct _ShapeStyle_ShapeType {}
 public indirect enum _ResolvedStyle {
   case color(AnyColorBox.ResolvedValue)
 //  case paint(AnyResolvedPaint) // I think is used for Image as a ShapeStyle (SwiftUI.ImagePaint).
-  // TODO: Material
-//  case foregroundMaterial(AnyColorBox.ResolvedValue, MaterialStyle)
+  case foregroundMaterial(AnyColorBox.ResolvedValue, _MaterialStyle)
 //  case backgroundMaterial(AnyColorBox.ResolvedValue)
   case array([_ResolvedStyle])
   case opacity(Float, _ResolvedStyle)
@@ -138,6 +137,8 @@ public indirect enum _ResolvedStyle {
     switch self {
     case let .color(resolved):
       return Color(_ConcreteColorBox(resolved))
+    case let .foregroundMaterial(resolved, _):
+      return Color(_ConcreteColorBox(resolved))
     case let .array(children):
       return children[level].color(at: level)
     case let .opacity(opacity, resolved):
@@ -146,56 +147,3 @@ public indirect enum _ResolvedStyle {
     }
   }
 }
-
-extension EnvironmentValues {
-  private struct ForegroundStyleKey: EnvironmentKey {
-    static let defaultValue: AnyShapeStyle? = nil
-  }
-
-  public var _foregroundStyle: AnyShapeStyle? {
-    get {
-      self[ForegroundStyleKey.self]
-    }
-    set {
-      self[ForegroundStyleKey.self] = newValue
-    }
-  }
-}
-
-public extension View {
-  @inlinable
-  func foregroundStyle<S>(_ style: S) -> some View
-    where S: ShapeStyle
-  {
-    foregroundStyle(style, style, style)
-  }
-
-  @inlinable
-  func foregroundStyle<S1, S2>(_ primary: S1, _ secondary: S2) -> some View
-    where S1: ShapeStyle, S2: ShapeStyle
-  {
-    foregroundStyle(primary, secondary, secondary)
-  }
-
-  @inlinable
-  func foregroundStyle<S1, S2, S3>(_ primary: S1, _ secondary: S2,
-                                   _ tertiary: S3) -> some View
-    where S1: ShapeStyle, S2: ShapeStyle, S3: ShapeStyle
-  {
-    modifier(_ForegroundStyleModifier(styles: [primary, secondary, tertiary]))
-  }
-}
-
-@frozen public struct _ForegroundStyleModifier: ViewModifier, EnvironmentModifier {
-  public var styles: [ShapeStyle]
-
-  @inlinable
-  public init(styles: [ShapeStyle]) {
-    self.styles = styles
-  }
-
-  public typealias Body = Never
-  public func modifyEnvironment(_ values: inout EnvironmentValues) {
-    values._foregroundStyle = .init(styles: styles, environment: values)
-  }
-}
diff --git a/Sources/TokamakDOM/Core.swift b/Sources/TokamakDOM/Core.swift
index 09b505b8a..d061a3c32 100644
--- a/Sources/TokamakDOM/Core.swift
+++ b/Sources/TokamakDOM/Core.swift
@@ -83,6 +83,9 @@ public typealias Rectangle = TokamakCore.Rectangle
 public typealias RoundedRectangle = TokamakCore.RoundedRectangle
 public typealias ContainerRelativeShape = TokamakCore.ContainerRelativeShape
 
+public typealias ForegroundStyle = TokamakCore.ForegroundStyle
+public typealias Material = TokamakCore.Material
+
 // MARK: Primitive values
 
 public typealias Color = TokamakCore.Color
diff --git a/Sources/TokamakDemo/ShapeStyleDemo.swift b/Sources/TokamakDemo/ShapeStyleDemo.swift
index ec7e43533..af4ac7a2d 100644
--- a/Sources/TokamakDemo/ShapeStyleDemo.swift
+++ b/Sources/TokamakDemo/ShapeStyleDemo.swift
@@ -18,25 +18,76 @@ import TokamakShim
 struct ShapeStyleDemo: View {
   var body: some View {
     #if compiler(>=5.5) || os(WASI)
-    HStack {
-      VStack {
-        Text("Red Style")
-        Rectangle()
-          .frame(width: 25, height: 25)
+    VStack {
+      HStack {
+        VStack {
+          Text("Red Style")
+          Rectangle()
+            .frame(width: 50, height: 50)
+        }
+        .foregroundStyle(Color.red)
+        VStack {
+          Text("Green Style")
+          Rectangle()
+            .frame(width: 25, height: 25)
+        }
+        .foregroundStyle(Color.green)
+        VStack {
+          Text("Blue Style")
+          Rectangle()
+            .frame(width: 25, height: 25)
+        }
+        .foregroundStyle(Color.blue)
       }
-      .foregroundStyle(Color.red)
-      VStack {
-        Text("Green Style")
-        Rectangle()
-          .frame(width: 25, height: 25)
+      ZStack {
+        HStack(spacing: 0) {
+          Rectangle()
+            .foregroundStyle(Color.red)
+            .frame(width: 60, height: 100)
+          Rectangle()
+            .foregroundStyle(Color.orange)
+            .frame(width: 60, height: 100)
+          Rectangle()
+            .foregroundStyle(Color.yellow)
+            .frame(width: 60, height: 100)
+          Rectangle()
+            .foregroundStyle(Color.green)
+            .frame(width: 60, height: 100)
+          Rectangle()
+            .foregroundStyle(Color.blue)
+            .frame(width: 60, height: 100)
+          Rectangle()
+            .foregroundStyle(Color.purple)
+            .frame(width: 60, height: 100)
+        }
+        VStack(spacing: 0) {
+          HStack {
+            Text("Ultra Thin")
+            Spacer()
+          }
+          .background(Material.ultraThin)
+          HStack {
+            Text("Thin")
+            Spacer()
+          }
+          .background(Material.thin)
+          HStack {
+            Text("Regular")
+            Spacer()
+          }
+          .background(Material.regular)
+          HStack {
+            Text("Thick")
+            Spacer()
+          }
+          .background(Material.thick, in: Rectangle())
+          HStack {
+            Text("Ultra Thick")
+            Spacer()
+          }
+          .background(Material.ultraThick, in: Rectangle())
+        }
       }
-      .foregroundStyle(Color.green)
-      VStack {
-        Text("Blue Style")
-        Rectangle()
-          .frame(width: 25, height: 25)
-      }
-      .foregroundStyle(Color.blue)
     }
     #endif
   }
diff --git a/Sources/TokamakStaticHTML/Core.swift b/Sources/TokamakStaticHTML/Core.swift
index d9e6d3de5..1b79cf635 100644
--- a/Sources/TokamakStaticHTML/Core.swift
+++ b/Sources/TokamakStaticHTML/Core.swift
@@ -42,9 +42,11 @@ public typealias Ellipse = TokamakCore.Ellipse
 public typealias Path = TokamakCore.Path
 public typealias Rectangle = TokamakCore.Rectangle
 public typealias RoundedRectangle = TokamakCore.RoundedRectangle
-
 public typealias ContainerRelativeShape = TokamakCore.ContainerRelativeShape
 
+public typealias ForegroundStyle = TokamakCore.ForegroundStyle
+public typealias Material = TokamakCore.Material
+
 // MARK: Primitive values
 
 public typealias Color = TokamakCore.Color
diff --git a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
index cf5f7dfbf..e4827e7b2 100644
--- a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
@@ -44,10 +44,3 @@ extension _ZIndexModifier: DOMViewModifier {
     ["style": "z-index: \(index);"]
   }
 }
-
-extension _BackgroundModifier: DOMViewModifier where Background == Color {
-  public var isOrderDependent: Bool { true }
-  public var attributes: [HTMLAttribute: String] {
-    ["style": "background-color: \(background.cssValue(environment))"]
-  }
-}
diff --git a/Sources/TokamakStaticHTML/Modifiers/_BackgroundShapeModifier.swift b/Sources/TokamakStaticHTML/Modifiers/_BackgroundShapeModifier.swift
new file mode 100644
index 000000000..e9935e386
--- /dev/null
+++ b/Sources/TokamakStaticHTML/Modifiers/_BackgroundShapeModifier.swift
@@ -0,0 +1,24 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import TokamakCore
+
+extension _BackgroundShapeModifier: DOMViewModifier where Bounds == Rectangle {
+  public var isOrderDependent: Bool { true }
+  public var attributes: [HTMLAttribute: String] {
+    var backgroundStyleModifier = _BackgroundStyleModifier(style: style)
+    backgroundStyleModifier.environment = environment
+    return backgroundStyleModifier.attributes
+  }
+}
diff --git a/Sources/TokamakStaticHTML/Modifiers/_BackgroundStyleModifier.swift b/Sources/TokamakStaticHTML/Modifiers/_BackgroundStyleModifier.swift
new file mode 100644
index 000000000..a321324c2
--- /dev/null
+++ b/Sources/TokamakStaticHTML/Modifiers/_BackgroundStyleModifier.swift
@@ -0,0 +1,57 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import TokamakCore
+
+extension _BackgroundStyleModifier: DOMViewModifier {
+  public var isOrderDependent: Bool { true }
+  public var attributes: [HTMLAttribute: String] {
+    if let resolved = style.resolve(
+      for: .resolveStyle(levels: 0..<1),
+      in: environment,
+      role: .fill
+    ) {
+      if case let .foregroundMaterial(rgba, material) = resolved {
+        let blur: (opacity: Double, radius: Double)
+        switch material {
+        case .ultraThin:
+          blur = (0.2, 20)
+        case .thin:
+          blur = (0.4, 25)
+        case .regular:
+          blur = (0.5, 30)
+        case .thick:
+          blur = (0.6, 40)
+        case .ultraThick:
+          blur = (0.6, 50)
+        }
+        return [
+          "style":
+            """
+            background-color: rgba(\(rgba.red * 255), \(rgba.green * 255), \(rgba
+              .blue * 255), \(blur
+              .opacity));
+            -webkit-backdrop-filter: blur(\(blur.radius)px);
+            backdrop-filter: blur(\(blur.radius)px);
+            """,
+        ]
+      } else if let color = resolved.color(at: 0) {
+        return [
+          "style": "background-color: \(color.cssValue(environment))",
+        ]
+      }
+    }
+    return [:]
+  }
+}
diff --git a/Tests/TokamakStaticHTMLTests/RenderingTests.swift b/Tests/TokamakStaticHTMLTests/RenderingTests.swift
index 086da17e6..018940b76 100644
--- a/Tests/TokamakStaticHTMLTests/RenderingTests.swift
+++ b/Tests/TokamakStaticHTMLTests/RenderingTests.swift
@@ -199,6 +199,29 @@ final class RenderingTests: XCTestCase {
       timeout: defaultSnapshotTimeout
     )
   }
+
+  func testMaterial() {
+    assertSnapshot(
+      matching: ZStack {
+        HStack(spacing: 0) {
+          Color.red
+          Color.orange
+          Color.yellow
+          Color.green
+          Color.blue
+          Color.purple
+        }
+        VStack(spacing: 0) {
+          Color.clear
+            .background(Material.ultraThin)
+          Color.clear
+            .background(Material.ultraThick)
+        }
+      },
+      as: .image(size: .init(width: 100, height: 100)),
+      timeout: defaultSnapshotTimeout
+    )
+  }
 }
 
 #endif
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/RenderingTests/testMaterial.1.png b/Tests/TokamakStaticHTMLTests/__Snapshots__/RenderingTests/testMaterial.1.png
new file mode 100644
index 000000000..bcba5e939
Binary files /dev/null and b/Tests/TokamakStaticHTMLTests/__Snapshots__/RenderingTests/testMaterial.1.png differ