Internet Explorer - Text Shadow and Glow

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.

.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')";
}

Improving Shadow Quality

Glow-Based Improved Shadow

.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;
}

dropShadow-Based Improved Shadow

.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;
}

References

• https://www.artlebedev.com/tools/technogrette/html/filters-in-ie/