Merge pull request #6607 from remotion-dev/web-renderer-text-shadow

`@remotion/web-renderer`: Add support for text shadows

Author: JonnyBurger

.claude/skills/web-renderer-test/SKILL.md

@@ -76,3 +76,4 @@ test('should render background-color', async () => {
 2. **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it.
 3. Add a new test in `packages/web-renderer/src/test`.
 4. Run `bunx vitest src/test/video.test.tsx` to execute the test.
+5. **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property.

packages/docs/docs/client-side-rendering/limitations.mdx

@@ -64,7 +64,7 @@ The `text-transform` property is <a style={{color: 'green'}}>supported</a>.
 The `direction` HTML attribute is <a style={{color: 'green'}}>supported</a>.  
 The `writing-mode` property is <a style={{color: 'red'}}>not supported</a>.  
 The `text-decoration` property is <a style={{color: 'red'}}>not supported</a>.  
-The `text-shadow` property is <a style={{color: 'red'}}>not supported</a>.  
+The `text-shadow` property is <a style={{color: 'green'}}>supported</a>.  
 The `-webkit-text-stroke` property is <a style={{color: 'red'}}>not supported</a>.
 
 ## Shadows

packages/web-renderer/src/drawing/draw-box-shadow.ts

@@ -2,12 +2,10 @@ import type {LogLevel} from 'remotion';
 import {Internals} from 'remotion';
 import type {BorderRadiusCorners} from './border-radius';
 import {drawRoundedRectPath} from './draw-rounded';
+import type {ShadowBase} from './parse-shadow';
+import {parseShadowValues} from './parse-shadow';
 
-interface BoxShadow {
-	offsetX: number;
-	offsetY: number;
-	blurRadius: number;
-	color: string;
+interface BoxShadow extends ShadowBase {
 	inset: boolean;
 }
 
@@ -16,57 +14,18 @@ export const parseBoxShadow = (boxShadowValue: string): BoxShadow[] => {
 		return [];
 	}
 
-	const shadows: BoxShadow[] = [];
+	const baseShadows = parseShadowValues(
+		// Remove 'inset' before parsing shared values
+		boxShadowValue,
+	);
 
-	// Split by comma, but respect rgba() colors
+	// Split by comma to check for inset on each shadow
 	const shadowStrings = boxShadowValue.split(/,(?![^(]*\))/);
 
-	for (const shadowStr of shadowStrings) {
-		const trimmed = shadowStr.trim();
-		if (!trimmed || trimmed === 'none') {
-			continue;
-		}
-
-		const shadow: BoxShadow = {
-			offsetX: 0,
-			offsetY: 0,
-			blurRadius: 0,
-			color: 'rgba(0, 0, 0, 0.5)',
-			inset: false,
-		};
-
-		// Check for inset
-		shadow.inset = /\binset\b/i.test(trimmed);
-
-		// Remove 'inset' keyword
-		let remaining = trimmed.replace(/\binset\b/gi, '').trim();
-
-		// Extract color (can be rgb(), rgba(), hsl(), hsla(), hex, or named color)
-		const colorMatch = remaining.match(
-			/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i,
-		);
-		if (colorMatch) {
-			shadow.color = colorMatch[0];
-			remaining = remaining.replace(colorMatch[0], '').trim();
-		}
-
-		// Parse remaining numeric values (offset-x offset-y blur spread)
-		const numbers = remaining.match(/[+-]?\d*\.?\d+(?:px|em|rem|%)?/gi) || [];
-		const values = numbers.map((n) => parseFloat(n) || 0);
-
-		if (values.length >= 2) {
-			shadow.offsetX = values[0];
-			shadow.offsetY = values[1];
-
-			if (values.length >= 3) {
-				shadow.blurRadius = Math.max(0, values[2]); // Blur cannot be negative
-			}
-		}
-
-		shadows.push(shadow);
-	}
-
-	return shadows;
+	return baseShadows.map((base, i) => ({
+		...base,
+		inset: /\binset\b/i.test(shadowStrings[i] || ''),
+	}));
 };
 
 export const drawBorderRadius = ({

packages/web-renderer/src/drawing/parse-shadow.ts

@@ -0,0 +1,61 @@
+export interface ShadowBase {
+	offsetX: number;
+	offsetY: number;
+	blurRadius: number;
+	color: string;
+}
+
+export const parseShadowValues = (shadowValue: string): ShadowBase[] => {
+	if (!shadowValue || shadowValue === 'none') {
+		return [];
+	}
+
+	const shadows: ShadowBase[] = [];
+
+	// Split by comma, but respect rgba() colors
+	const shadowStrings = shadowValue.split(/,(?![^(]*\))/);
+
+	for (const shadowStr of shadowStrings) {
+		const trimmed = shadowStr.trim();
+		if (!trimmed || trimmed === 'none') {
+			continue;
+		}
+
+		const shadow: ShadowBase = {
+			offsetX: 0,
+			offsetY: 0,
+			blurRadius: 0,
+			color: 'rgba(0, 0, 0, 0.5)',
+		};
+
+		// Remove 'inset' keyword (only relevant for box-shadow, but strip it
+		// so it doesn't interfere with color matching)
+		let remaining = trimmed.replace(/\binset\b/gi, '').trim();
+
+		// Extract color (can be rgb(), rgba(), hsl(), hsla(), hex, or named color)
+		const colorMatch = remaining.match(
+			/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i,
+		);
+		if (colorMatch) {
+			shadow.color = colorMatch[0];
+			remaining = remaining.replace(colorMatch[0], '').trim();
+		}
+
+		// Parse remaining numeric values (offset-x offset-y blur-radius [spread])
+		const numbers = remaining.match(/[+-]?\d*\.?\d+(?:px|em|rem|%)?/gi) || [];
+		const values = numbers.map((n) => parseFloat(n) || 0);
+
+		if (values.length >= 2) {
+			shadow.offsetX = values[0];
+			shadow.offsetY = values[1];
+
+			if (values.length >= 3) {
+				shadow.blurRadius = Math.max(0, values[2]);
+			}
+		}
+
+		shadows.push(shadow);
+	}
+
+	return shadows;
+};

packages/web-renderer/src/drawing/text/draw-text.ts

@@ -3,6 +3,7 @@ import {Internals} from 'remotion';
 import type {DrawFn} from '../drawn-fn';
 import {applyTextTransform} from './apply-text-transform';
 import {findWords} from './find-line-breaks.text';
+import {parseTextShadow} from './parse-text-shadow';
 
 export const drawText = ({
 	span,
@@ -25,6 +26,7 @@ export const drawText = ({
 			letterSpacing,
 			textTransform,
 			webkitTextFillColor,
+			textShadow: textShadowValue,
 		} = computedStyle;
 		const isVertical = writingMode !== 'horizontal-tb';
 		if (isVertical) {
@@ -63,6 +65,8 @@ export const drawText = ({
 
 		const tokens = findWords(span);
 
+		const textShadows = parseTextShadow(textShadowValue);
+
 		for (const token of tokens) {
 			const measurements = contextToDraw.measureText(originalText);
 			const {fontBoundingBoxDescent, fontBoundingBoxAscent} = measurements;
@@ -72,11 +76,27 @@ export const drawText = ({
 			const leading = token.rect.height - fontHeight;
 			const halfLeading = leading / 2;
 
-			contextToDraw.fillText(
-				token.text,
-				(isRTL ? token.rect.right : token.rect.left) - parentRect.x,
-				token.rect.top + fontBoundingBoxAscent + halfLeading - parentRect.y,
-			);
+			const x = (isRTL ? token.rect.right : token.rect.left) - parentRect.x;
+			const y =
+				token.rect.top + fontBoundingBoxAscent + halfLeading - parentRect.y;
+
+			// Draw text shadows from last to first (so first shadow appears on top)
+			for (let i = textShadows.length - 1; i >= 0; i--) {
+				const shadow = textShadows[i];
+				contextToDraw.shadowColor = shadow.color;
+				contextToDraw.shadowBlur = shadow.blurRadius;
+				contextToDraw.shadowOffsetX = shadow.offsetX;
+				contextToDraw.shadowOffsetY = shadow.offsetY;
+				contextToDraw.fillText(token.text, x, y);
+			}
+
+			// Reset shadow and draw the actual text on top
+			contextToDraw.shadowColor = 'transparent';
+			contextToDraw.shadowBlur = 0;
+			contextToDraw.shadowOffsetX = 0;
+			contextToDraw.shadowOffsetY = 0;
+
+			contextToDraw.fillText(token.text, x, y);
 		}
 
 		span.textContent = originalText;

packages/web-renderer/src/drawing/text/parse-text-shadow.ts

@@ -0,0 +1,8 @@
+import type {ShadowBase} from '../parse-shadow';
+import {parseShadowValues} from '../parse-shadow';
+
+export type TextShadow = ShadowBase;
+
+export const parseTextShadow = (textShadowValue: string): TextShadow[] => {
+	return parseShadowValues(textShadowValue);
+};

packages/web-renderer/src/test/Root.tsx

@@ -54,6 +54,7 @@ import {backgroundClipText3dTransform} from './fixtures/text/background-clip-tex
 import {letterSpacing} from './fixtures/text/letter-spacing';
 import {paragraphs} from './fixtures/text/paragraphs';
 import {textFixture} from './fixtures/text/text';
+import {textShadow} from './fixtures/text/text-shadow';
 import {textTransform} from './fixtures/text/text-transform';
 import {webkitTextFillColor} from './fixtures/text/webkit-text-fill-color';
 import {threeDoverflow} from './fixtures/three-d-overflow';
@@ -135,6 +136,7 @@ export const Root: React.FC = () => {
 				<Composition {...webkitTextFillColor} />
 				<Composition {...backgroundClipText} />
 				<Composition {...backgroundClipText3dTransform} />
+				<Composition {...textShadow} />
 				<Composition {...whiteSpaceCollapsing} />
 				<Composition {...whiteSpaceCollapsing2} />
 			</Folder>