Video Backlight

The video's colours will bleed in a blurred and faded method around the edges mimicking a backlight.

Thanks to @wesbos on X for publishing his technique using SVG blur and saturation values onto an element. This looks best on dark backgrounds with bright videos. I have changed the values to better work with animated videos.

January 25, 2025: Changed blurred to blur and added in2 on feComposite to make it HTML valid.

Place the SVG file inlined on the back you want the effect.

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="blur-and-scale" y="-50%" x="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur" />
<feColorMatrix type="saturate" in="blur" values="1" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</svg>

CSS code

video {filter:url(#blur-and-scale);}