Add gradient mask to remove hard edge on background blur

guardian · Nov 22, 2024 · 57a5e27 · 57a5e27
1 parent c9808f8
commit 57a5e27
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -124,8 +124,9 @@ const overlayStyles = css`
 	flex-direction: column;
 	justify-content: flex-start;
 	flex-grow: 1;
-	padding: ${space[2]}px;
 	row-gap: ${space[2]}px;
+	padding: 72px ${space[2]}px ${space[2]}px;
+	mask-image: linear-gradient(180deg, transparent 0, #000 64px);
 	backdrop-filter: blur(12px) brightness(0.7);
 `;