From c7c0d459486e7c33f818cd38436ff7f1f635ea26 Mon Sep 17 00:00:00 2001
From: tobias-tengler <45513122+tobias-tengler@users.noreply.github.com>
Date: Sat, 17 Oct 2026 12:05:48 +0000
Subject: [PATCH] Fix transparency in image loading placeholders

---
 website/src/design-system/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/design-system/Image.tsx b/website/src/design-system/Image.tsx
index 6bcdba4cadd..5002a05abd4 100644
--- a/website/src/design-system/Image.tsx
+++ b/website/src/design-system/Image.tsx
@@ -19,7 +19,8 @@ interface ImageProps extends ComponentPropsWithoutRef<"img"> {
 /**
  * Builds the placeholder background, mirroring next/image: the tiny blur image
  * is stretched across an upscaled viewBox and run through a Gaussian blur, then
- * used as the element background (`cover`) behind the real image until it loads.
+ * used as the element background (`cover`) until it loads. Transparent areas
+ * remain transparent.
  */
 function blurBackground(
   blurDataURL: string,
@@ -32,7 +33,6 @@ function blurBackground(
     `%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${svgWidth} ${svgHeight}'%3E` +
     `%3Cfilter id='b' color-interpolation-filters='sRGB'%3E` +
     `%3CfeGaussianBlur stdDeviation='20'/%3E` +
-    `%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E` +
     `%3C/filter%3E` +
     `%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E` +
     `%3C/svg%3E`;