Internet Explorer - Text Shadow and Glow - Revision history

Dex at 16:08, 14 March 2026

2026-03-14T16:08:17Z

← Older revision		Revision as of 16:08, 14 March 2026
Line 1:		Line 1:
	[[Category:Internet Explorer]]		[[Category:Internet Explorer]]
	[[Category:DirectX Filter]]		[[Category:DirectX Filter]]
	~~The idea is that first we use Glow~~ to create ~~a halo around~~ the text and ~~then blur it with Blur~~. The ~~resulting shadow is~~ then ~~placed~~ under the text using ~~absolute positioning~~. ~~The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>~~		[[Category:Legacy Browser Compatibility]]
	~~[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]~~		Internet Explorer (IE) predates modern CSS text‑shadow support, so developers often relied on DirectX Filters to simulate glows, shadows, and blurs. These filters were powerful but also inconsistent, slow, and easily misconfigured. This article explains how to create text shadows in IE using Glow, Blur, Alpha, and dropShadow, why the results often look rough, and how to improve quality through tuning.

			== Context ==
			Before CSS3, browsers did not support text-shadow. IE introduced its own proprietary visual effects using DXImageTransform.Microsoft.* filters. These were originally designed for multimedia/DirectX transitions and later exposed through CSS.

			== The Basic Approach ==
			A common technique was to apply Glow, then Blur, and shift the result under the text using offsets.

	<pre>		<pre>
	.shadowed .shadow-1		.shadowed .shadow-1 {
	{		left: -7px;
	left: -7px;		top: -7px;
	top: -7px;		filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)		progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"		"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	}		}

	.shadowed .shadow-2		.shadowed .shadow-2 {
	{		left: -5px;
	left:-5px;		top: -5px;
	top:-5px;		filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)		progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"		"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	}		}
	</pre>		</pre>
	~~Turns out, the~~ Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):<br/>
	~~[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow~~-~~2.png]]~~		== Improving Shadow Quality ==

			=== Glow-Based Improved Shadow ===
	<pre>		<pre>
	.shadowed .shadow-3		.shadowed .shadow-3 {
	{		filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)		progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)		progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');
	progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"		"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"		"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";		color: #111111;
	color: #111111;		top: -2px;
	top: -2px;		left: -2px;
	left: -2px;
	}		}
			</pre>

	.shadowed .shadow-4		=== dropShadow-Based Improved Shadow ===
	{		<pre>
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)		.shadowed .shadow-4 {
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)		filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');		progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"		progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"		-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";		"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	color: #111111;		"progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";
	top: -2px;		color: #111111;
	left: -2px;		top: -2px;
			left: -2px;
	}		}
	</pre>		</pre>
	~~Reference: [[~~https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ ~~Artlebedeb: Using filters in IE]]~~
			== References ==
			* https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/

Knowledgebaseadmin at 12:50, 6 March 2025

2025-03-06T12:50:09Z

← Older revision		Revision as of 12:50, 6 March 2025
Line 1:		Line 1:
	[[Category:Internet Explorer]]		[[Category:Internet Explorer]]
			[[Category:DirectX Filter]]
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]

Knowledgebaseadmin at 11:45, 6 March 2025

2025-03-06T11:45:52Z

← Older revision		Revision as of 11:45, 6 March 2025
Line 1:		Line 1:
			[[Category:Internet Explorer]]
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]

Knowledgebaseadmin at 13:52, 5 March 2025

2025-03-05T13:52:16Z

← Older revision		Revision as of 13:52, 5 March 2025
Line 1:		Line 1:
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]
	~~<code>~~<pre>		<pre>
	.shadowed .shadow-1		.shadowed .shadow-1
	{		{
Line 21:		Line 21:
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";		"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	}		}
	</pre~~></code~~>		</pre>
	Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):<br/>		Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png]]
	~~<code>~~<pre>		<pre>
	.shadowed .shadow-3		.shadowed .shadow-3
	{		{
Line 50:		Line 50:
	left: -2px;		left: -2px;
	}		}
	</pre~~></code~~>		</pre>
	Reference: [[https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ Artlebedeb: Using filters in IE]]		Reference: [[https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ Artlebedeb: Using filters in IE]]

Knowledgebaseadmin at 13:51, 5 March 2025

2025-03-05T13:51:41Z

← Older revision		Revision as of 13:51, 5 March 2025
Line 1:		Line 1:
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]
	<code><pre>		<code><pre>
Line 22:		Line 22:
	}		}
	</pre></code>		</pre></code>
	Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):		Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):<br/>
	[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png]]		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png]]
	<code><pre>		<code><pre>

Knowledgebaseadmin at 13:50, 5 March 2025

2025-03-05T13:50:22Z

← Older revision		Revision as of 13:50, 5 March 2025
Line 1:		Line 1:
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.
	https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png]]
	<code><pre>		<code><pre>
	.shadowed .shadow-1		.shadowed .shadow-1
Line 23:		Line 23:
	</pre></code>		</pre></code>
	Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):		Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):
	https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png		[[File:https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png]]
	<code><pre>		<code><pre>
	.shadowed .shadow-3		.shadowed .shadow-3

Knowledgebaseadmin at 13:46, 5 March 2025

2025-03-05T13:46:58Z

← Older revision		Revision as of 13:46, 5 March 2025
Line 1:		Line 1:
	The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.		The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.
	https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png		https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png
	<code>		<code><pre>
	.shadowed .shadow-1		.shadowed .shadow-1
	{		{
Line 21:		Line 21:
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";		"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
	}		}
	</code>		</pre></code>
	Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):		Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):
	https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png		https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png
	<code>		<code><pre>
	.shadowed .shadow-3		.shadowed .shadow-3
	{		{
Line 50:		Line 50:
	left: -2px;		left: -2px;
	}		}
	</code>		</pre></code>
	Reference: [[https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ Artlebedeb: Using filters in IE]]		Reference: [[https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ Artlebedeb: Using filters in IE]]

Knowledgebaseadmin: Created page with "The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text. https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png `.shadowed .shadow-1 { left: -7px; top: -7px; filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,S..."`


2025-03-05T13:43:09Z
Created page with "The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text. https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png <code> .shadowed .shadow-1 { 	left: -7px; 	top: -7px; 	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,S..."
New page
The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text.

https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-1.png

<code>

.shadowed .shadow-1

{

	left: -7px;

	top: -7px;

	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)

	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');

	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"

	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";

}



.shadowed .shadow-2

{

	left:-5px;

	top:-5px;

	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)

	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');

	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"

	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";

}

</code>

Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):

https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/i/ie-shadow-2.png

<code>

.shadowed .shadow-3

{

	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)

	progid:DXImageTransform.Microsoft.Alpha(opacity=25)

	progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');

	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"

	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"

	"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";

	color: #111111;

	top: -2px;

	left: -2px;

}



.shadowed .shadow-4

{

	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)

	progid:DXImageTransform.Microsoft.Alpha(opacity=25)

	progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');

	-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"

	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"

	"progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";

	color: #111111;

	top: -2px;

	left: -2px;

}

</code>

Reference: [[https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ Artlebedeb: Using filters in IE]]