diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
index bed0d556e8..f16ad5c25d 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -164,13 +164,30 @@ float StyleProperties::opacity() const
         return 1.0f;
     auto& value = maybe_value.value();
 
-    if (value->has_number())
-        return clamp(value->to_number(), 0.0f, 1.0f);
+    float unclamped_opacity = 1.0f;
 
-    if (value->is_percentage())
-        return clamp(value->as_percentage().percentage().as_fraction(), 0.0f, 1.0f);
+    if (value->has_number()) {
+        unclamped_opacity = value->to_number();
+    } else if (value->is_calculated()) {
+        auto& calculated = value->as_calculated();
+        if (calculated.resolved_type() == CalculatedStyleValue::ResolvedType::Percentage) {
+            auto maybe_percentage = value->as_calculated().resolve_percentage();
+            if (maybe_percentage.has_value())
+                unclamped_opacity = maybe_percentage->as_fraction();
+            else
+                dbgln("Unable to resolve calc() as opacity (percentage): {}", value->to_string());
+        } else {
+            auto maybe_number = value->as_calculated().resolve_number();
+            if (maybe_number.has_value())
+                unclamped_opacity = maybe_number.value();
+            else
+                dbgln("Unable to resolve calc() as opacity (number): {}", value->to_string());
+        }
+    } else if (value->is_percentage()) {
+        unclamped_opacity = value->as_percentage().percentage().as_fraction();
+    }
 
-    return 1.0f;
+    return clamp(unclamped_opacity, 0.0f, 1.0f);
 }
 
 Optional<CSS::FlexDirection> StyleProperties::flex_direction() const