Box shadows are boring. You heard me. They can only use one color at a time and are slow to animate or transition. You know what would be neat? Making a drop shadow that would use the colors of the element’s background. So if the top left corner of your element was red, the top left corner of the shadow would be red. If the bottom right corner was blue, the bottom left corner of the shadow would be blue. Wouldn’t that be neat? Too bad there’s no way to do it in CSS… Oh wait, there is. Let’s dive in.
The Method
Really, all we have to do is create a pseudo-element directly behind the parent element and have it inherit relevant properties, such as background and border-radius. Then we add a CSS blur() filter. This creates a second copy of the element’s background and blurs it behind the element. Easy as pie. By inheriting the background and related properties, we don’t have to specify them repeatedly.
Even better, if you want to animate / smoosh / squash the shadow in some way, you have the full power of CSS transforms and opacity available to you on the pseudo-element!
What’s the catch? The shadow won’t display in browsers that don’t support the CSS blur filter.
The Code
/* The element that will have the blurred shadow. */.fancy-box { /* We need to set the position value to something other than `static` * so that position: absolute for the pseudo-element will be relative * to this element. */ position: relative; /* A nice Alligator.io-themed linear gradient. */ /* This technique works with any and every background type. */ background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104)); /* Whatever else you want in here. */}/* The shadow pseudo-element. */.fancy-box::before { content: ' '; /* Position it behind the parent. */ z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Inherit the background and border radius of the parent. */ background: inherit; border-radius: inherit; /* Blur it for maximum shadowy-ness. */ filter: blur(15px); /* Hide the shadow until the element is hovered over. */ opacity: 0; transition: opacity 300ms;}/* Show the shadow on hover. */.fancy-box:hover::before { opacity: 1;}The Result
Note how it even works with transparent images! You can finally make shaped shadows!
Here’s a codepen you can play around with.
(function(){ document.addEventListener(‘DOMContentLoaded’, () = { var styleEl = document.createElement(‘style’); styleEl.type = ‘text/css’; styleEl.appendChild(document.createTextNode(` .article-demo .fancy-box-wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .article-demo .fancy-box { position: relative; display: block; height: 215px; width: 215px; margin: 25px; border-radius: 50px; } .article-demo .fancy-box::before { content: ‘’; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; border-radius: inherit; filter: blur(15px); opacity: 0; transition: opacity 300ms; } .fancy-box:hover::before { opacity: 1; } .article-demo .fancy-box.gradient { background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104)); } .article-demo .fancy-box.shaped { background: url(‘/images/logo-fancy.svg’); background-size: cover; } .article-demo .fancy-box.image { background: url(‘data:image/jpeg;base64,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AgAAIAACAAAVAAkABACKgQEEogAiKAABxrIAFAKACwKFoKClBQUoKCgoBQEFAABQBQAAABBABQEABBAECgQAAgAAIoAAJAAKEACRQIIEAJKBAILAABA43kACgAoEULQClBQUoLFBQWhQCgAoAQCgACgAAAIgAVAASABFAgABAACKAABAAEAgFAQAEgCASwAggoEAgAcbyABQAWAWgoBQUsClBQUoKAUAoAqgAAJQAKAAEAACCAAgUQAgAIACBQgAQAAUAIgAEABAAQSiACIoACIADjeQAKAWAUUFBQWBVFBSgoKCoKACgAoFAAUIAFAQAAAgAIAQEABAAQKEAQAAAEAoAEEABAACSgQCCwACAAC57wAKAIoUUAoKIqigoKUFBQUAoAKgAoAFAAEACgAAIACAEAIAQAgEoEAAUAQAAIFAQBAIAFkAASCgCCAACjPeAKAIoUUAoBZRQUFKCgoLChQCgAoAQUACgACABQAgAIAQAgIAIgUCAAKBAAAAAEEoAAQAQIAIigABEAAUcbwABRBRQCgFlFBQUFgUFBQCgFABaAAFCAAKAABAIKAgBACARACKAIAFCIAAAAKAEQABSIAAQBUAQAQAAAM95AoEFoAKAVUUAoKIqigoKAVABQAUAUAKAgAUABAEAEAIAQAiiAAEAlAEAUAAAgUIAgAAgABJQAAIIAAAHG8gBFUCgAoEtBQCiWgoKAUAoAKEAFAAFAUBAAqAAAEABACAgAIAIigAAogAAAAQKgAQAQACUAQACABAADneQAgtABQCygUFCooKCgFAKACgAAqAAABQFIEAAUAIACAEAIBEAUCAAKEAACCgAQBUACAAsgAACAQAAABxvNEFAoAKAtgCgLYAoKAWAKACgCgKAAEAACgAACAAQAEAIAQALAAAFkAAAAABUAQAKgAgAAQAAAkAAADnUoABQAUCUUAolFBQCwBQAUAAAoAoAAAgoIKAAAAiACAAgUCAAEEFAAAKBAEACgSAAAAgAABAAACAACwAAUAFEoFALKBQCiC0AoAQAUAAAAFoAAgAgFAAAQAAgAIACQACgAAsAAACAQUCAQAAAAgAAIAAAALAABQAWUAUAsoFALBRQACgAIAABQAABQAAIBAAAKgAEQAAEACgACCUAABQEQAKEQAACAAAEAABAAAWwAUAAsoAoAloBQIqgCgAAoACAAAAAABQ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AAAAAAAAABFAAABBQAAAAAAAAAAAAAAAgAAQQAAKABQAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAARQAKAAQAAFAASAoAAAAAAAAAAAAACABAAIoAAFAAAAAAAAAKAAAAAAAAAAAAAAAAAAAIoAoAIAAAAAAAAAAChAAAAAAAAAAAAACABIoAAAFAAAAAAAABQAAAAAAAAAAAAAAAAABFAoBAAAAAAAAAAAAAACgAAAAAAABAAAAADkAAAAFAAAAAAAABQAAAAAAAAAAAAAAAAAWAoBAAAAAAAAAAAAAAAAAUAAAAAAAAABAAcgAAAAFAAAAAAAAAKAAAAAAAAAAAAAAAACwFAIAAAAAAAAAAAAAAAAAAAAAAUAAAAAAOAAAAAAUAAAAAAAAAoAAAAAAAAAAAAAAABYCggAAAAAAAAAAAAAAAAAAAAAAAAAAKAAHAAAAAAKAAAAAAAAAAAAAAAAUAAAAAAAAAFhQCAAAAAAAAAAAAAAAAAAABQAAAAAAAADOgAAAABQAAAAAAAAAAAAAAAAAUAAAAAAAAsKAQAAAAAAAAAABQAAAAAAAAAAAAAAAAAZ0AAAAAKAAAAAAAAAAAAAAAAAAUAAAAAAAAoAEAAAAAAAACgAAAAAAAAAAAAAAAAAAA4oQAAAAFAAAAAAAAAAAAAAAAAABQAAAAAAACgCAFIAAAAAAoAAAAAAAAAAAAAAAAAAABxQEAAABQAAAAAAAAAAAAAAAAAAAUAAAAAAAFAAgKQAAAAAKAAAAAAAAAAAAAAAAAAUAAzoACAAoAAAAAAAAAAAAAAAAAAAABQAAAAAACgAQApAAAAAFAAAAAAAAAAAAAAAKAAAAAZ0AAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAACgAQFBAAAAFAAAAAAAAAAAAABQAAAAAADOgAAAAAAAAAAAAAAAAAAAAAAAAAKAAAAAAAUAAQoIAAAAoAAAAAAAAAAABQAAAAAAAAZ0AAAAAAAAAAAAAAAAAAAAAAAAAAKAAAAAACgACAoIAAAAoAAAAAAAAAAKAAAAAAAAADKhQAAAAAAAAAAAAAAAAAAAAAAAAAUAAAAAAFAAAhQQAAABQAAAAAAAAACgAAAAAAAAAGVAUAAAAAAAAAAAAAAAAAAAAAAAAAoAAAAAAKAABCggAAACgAAAAAAAAAoAAAAAAAAAAMqAoAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAUAAAACAAABQAAAAAAAACgAAAAAAAAAAGVACgAAAAAAAAAAAAAAAAAAAAAAAAoAAAAAAKAAAIUEAAACgAAAAAAAAoAAAAAAAAAAAP/8QAFBABAAAAAAAAAAAAAAAAAAAA4P/aAAgBAQABBQIAAf/EABQRAQAAAAAAAAAAAAAAAAAAAOD/2gAIAQMBAT8BAAH/xAAUEQEAAAAAAAAAAAAAAAAAAADg/9oACAECAQE/AQAB/8QAFBABAAAAAAAAAAAAAAAAAAAA4P/aAAgBAQAGPwIAAf/EABQQAQAAAAAAAAAAAAAAAAAAAOD/2gAIAQEAAT8hAAH/2gAMAwEAAgADAAAAEEkltpIACTbSQAAAEltttsm/4haSJM22tkTYDUt2tICSSTbZJIEkkl/+0toCSAATbUktpJAASbbSAABttttttm2/gBaQJq23tkbQLUv2tKSSSSbbZJJAkkv+21sAAAAAJUtpJIACTbaQAANtttttk239gLaBJ+2tsibAL1u2tKSSSSSTbbbJIkk/23tpkkkAAJJJIACSbbQAAFtttttkm2/8AbSBP21tsSZAb1u0paSSSSSSSSbbbYkt+2/tNtttAJJAACSbbQAANttv/wD/ALbbb2gNsAl7aW2ZNkFqX6UlJJAAAAJJJJJttQW3bb+22222AAAJJtsgAG2//wD2222229tAbaBL21tuyTIDcl+lKSQJJJJJAAAASbbQlt223/8A/wD/AAASSbbIABt/+22222229tATbADe0ltWSJAT8n+paSAJJttpJJIAAAbaUts222222ySSbbIAk/8A9ttpJJJbbbYEk2AH9pbekkSQm5P9KUkATSSW222SSSAAG0lLZJttttu222SAJP8A7aSS22220kkBJNkAP6S37JAkpJmT+QtIAkl/bbbbbf8A7ZABbS1tskkkkrbJAAH/APtJLbbb/wD/APaSSTZIDfkk/wCkCSUkzJ/oG0ASftttttttttv2ACWlt7bbbbYAAAH/APyS23tJJJJJJJJkkgJPyS/pAElJImTfyVpAl/bbbaSSSSbbd9gAlpbf2222AAf/AP0kt/SSSAJJJJJJJIST9kn/AEASWkkTZv5K2gCettpJbbbbbJJN+0ASUlttttu23/pJL/kgCSSSSSSSS0kk/ZJ/8AC20gCbt/ZG0AD1tJJLbbbbbbZJP2kASQkkkkn/APSST/5AEklJJJJJJJJJ+2yb/wAALbSANO21sibABfWkkttttv8A/bbZJO0kCSSQABJJJJ/+gCS0kkkkkkAAATbbNv8A0ANtIAk/ba2TNoAtvaSW22/7bbb/ANsknaSQJJJJJFt//wCgCWkkiSbbbbbbbbNtv7QA20gAT/ttbJm2AC3tJLbb9tttttv/AGSUtpJIAAAA/wD/AMACW0gSbbttttttttt/bQA20AAf/tpbZt2QAW1pJbbftttttttv7JLW2kkkkklJAAS20gTbttttttttpbbbAE22ACX9tpbbNuyAC29pJbb9tttttttv/ZJLW222220SSW2kgTdttrbbbbbbbbAEm2wAC39tJbbts2QAG2tJJbbttttttttt/wDySS0kkkkstttJAE37b22222SabZJJNtkABt7aS23bbdkABNtaSS237bbbb+2bbb//AMkkgAAAACSQAJP+2ttt22SSSSTbZJAADb+0ltu223JIACba0kltv+2223tttk22/wD/AGSSSSSSEkkl/wC2ltu2ySbbJJJJAADbf2ktt2229JIADbbUkktt/wBttt7bbbbbNt//AP8Av9ttt5bf+20ltu22ZJJJJAACTbbWklt+229pJAATbbQkkttv/wBttvbbaSbbbNtv/wD/AP8A/wD/AG220ltt+2zZJJAASSbbbYkktv22/pJAASbbbAkkttv/ANttt7baAACbbbNtt/8A/wD+29ttttv22TJJICSTbbbIkktv+23pJAASbbbYEkttt/8A/tttvbaAAEgATbbNttttttvbf/tttvSSAEk22yQBJLb/ALbb0kgBJtttoCSW23//AG22229tsAACSSSBNttkkkkklm2222lpJACSbbZAAkt//wBttbSQEm222AAJbbf/ALbbbbbbW22AQJJJJJJE2222222222kkkkgBJJtsgASX/wD221ttACTbbYAAFtt/+2222221tttoECSbbbaSSSJttttttgAAAASSSTbZAAk//wDttLbbAEm22wABbbf/ALbbbf8A9tttttoEiTbbbbbbSSSRtttskiSSSSSbbZIAAn//ANtJbbbEk22yAALbf/tttv8A22222222ySBJttttttttJJJIAAAAtttttkkgAAH/AP8AtpLbbNkm22AABbb/ALbbb/22kAAAASSSQJJttttpNttttpJJJJJJAEkgAAAAB/8A/wBpJbbZtk22yAADbf8Abbbf22gAAABJJJJJJNttttJJJIJttttJJJJJAAAAABf/AP8A9tJLbbNsk22QAADb/wDbbb+22SQBJJNtttttttttpJJAAAABNttttttttttv/wD/AP8AbaS223bZJtsgAAElv7bbb22ySAJNtttttttttttpIIAAAAAAAJtttttt/wD/AP8A/baSS2237ZJttkAAAkt/7bbe22ySBJttttttttttttpJAAASSQAAAABsltttbbaSSSS2237bJNtkgAAElt/bbbe22yQJNttttpJJJJJJJJJAASSSSSQAAAAAkkkk2222222/7bbdskgAAAkt/wC2223ttkkCTbbbSSSAAAAAAAAAAkkkkkkkkAAAAAJJJNttt/8A/ttt2ySQAACS2/ttttvbbZJAk2220kgABJJJIAABJJJJJLbbJJAAAAAASST/AP8A2222yZJJIAAJbb+22229tttkkgbbbbSQAEkkkkkkkkkkkltttttskAAAAAAAAG222yyAJJIAADbb+22229tttskkAbbbbSQAkkttttttttttttttttttkAAAAAJJJG22AAAJJIACTf8AttttrbbbbJJIA22220kAJJLbbbbbbbbbbbbbbbbbbZBJAACSSSRJAAASSS0kn3/ttt7bbbbJJIAG2222kkAJJbbbbbbbbbbbbbbbbbbbZJJIJTabSRIAAAAG22ll/wD7SS2222SSQANtttttpJASSW2222222222222222222ySSS222SSQTABJJJtt7b+2SS222SSAJttttttpJIASS22222ySSSSSW22222222ySSS22gAL/8A/wAkkkkkv/pLbJJbZIAkm222222kkgAJJLbbbbJJJJJJJJJf7bbbbbJJJbSQAG2/9tu2229trbZJbJLblkk222220kkgAJJJbbbbbJJJJJJJJJP/AP2/22ySSW0kAFtpbf8A/wAk/wC22yS2yW7btpJJtttJJAAASSSW22222SSSSbbbbbf/AP8A/wD/AP0kktpIABJSb+2220kkkklsk/27SbaSbbYAAAAkkkltttttskkkk2222223/wD/AP8A/wDttCSQACSAWlv/APbSSSW22Tf/ADaTaTaAJJIAkgEktttttttskkkk2222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YkgTb/8A/wD+/wD2SSW2yQEkAJNt/wC222227bbZJJJJAX+5AL2/+lIJW+xJAAAJJJu23ZIAk/8A/wD/APbb/kkltskBJAALbbbW2SSSSbbZJJJJAX+1IDe3/koDW+kJAJIkk22/bYAEt/8Askkk223JJLbJJSSAAS220kkkkkkm2ySSSUl/tCAG9v8AykN7+Qkgbbf/AP8A2kAJbbfkkkkkm22kNJbZJLSAASWW2kkkkkkkm2ySSUk/9KQE3tvJQmt7IST/AP8A+SSSANttkSSSSSSTbbSSGtskltAAJJJLaSSSSSSSLbJbSS/8lJCbe3kIT2tkJCSSSTJJNttskSSSSSSSbbaSS1tkktoAAJJJJbSSSSSSSLbaSS39khJSb2shSe1sALbJJJJttkkkCSSTSSSSTbbSSS/skltoEABJJJLaSSSSSSLaSS2/skpKSb1sKT2toJJJJEkkkkkkSSTbbSSSSTbbSST9skttskgABJJJZCSSSSaSSSS3tskBaTetjSf0tgEkkkkkkkkASTbbbbSSSSbbaSSXNkktttkkAAJJJJICSQLaSSSW3tskBaT0sbT/AJJJJJJJJJJAEm222222kkkkm22kkmzbJJbbbZJAASSSSW2220kkkktbbZC0npYml/ZJJJJJJbbSSS2222222kkkkm22kkm3bJJLbbbZIAASSSSSS220kktpLbZG0/LU0l9JJJJJaSSSSW22222222kkkk222kkm3bZJJLbbbZIAASSSSSS22222pJbYWn5aG0lJJJJJSSSSS222W222222kkkk222kkm27bZJJLbbbJIAASSSSW222225JbA0vLYm1JJJJJbSSSS22yW2222222kkkk222kkk227bZJJLbbbJIAAAAAAG20225JbGl5LUlJJJJJIC2SSW22W22222222kkkk222kkkm227bZJJLbbbZJIAAAAAkkkmZLY0vJbRJJJJAAAEm2S22S222222220kkkkm222kkkk22bbZJJJbbbbaSSSSS0kk3JbG07JZJJJJJAkAEk2W2y2222222220kkkkm2222kkkkkjbbbJJJbbbbbSSSS20k7LY2m7JJJJIAAEkkkky22W2222222220kkkkk222222kkkkLbbbJJJJJJJJJLS20mZLG0m5JJJJIAEkkkkm22y22222222220kkkkkk2222222kkALbbbZJJJJJJJIE20zJZG2nbbbZAAkkkkkk222W2222222222kkkkkkkkkk222220kABbbbbbbbbbbJM2k7LYm3/AP8A9tv7bSSSSSTbbLbbbbbbbbbbaSSSSSSSSSSSTbbbbSQAAlttttttttmzaZkts/8A/wC3/wDpbbSSSSSbbZbbbbbbbbbbbbSSSSSSSSSSSSSTbbbaCAAEkkkkktt2bSJklm222/8A/wDlttJJJJNttlttttttttttttpJJJJJJJJJJJJJNtttskgAASASSW/ZtIE2bbbbbf8AbbbaSSSSTbbbbbbbbbbbbbbbbbbbbbbbbbbaSSSSTbbbZJJJJNkk/wAk2kBttttttv8AtttpJJJJtttttttttttttttttttttttttttttpJJJJIIAAAAkmyT/wCSbW2222222/bbbSSSSSTbbbbbbbbbbbbbbbbbbbe22237bbbbbbSSSQAAAAAJtk3/APv/AP7bbbbbJtttpJJJJJJJJttttttttttttt7bZJJbbbJJP9tttttttkkkkgAA23bb/wD/APtttttk2220kkkkkkkkkkk222222229tkktttttttttttk2222SSSSSSSAALbf/AP8A/wDttttsk222kkkkkkkkkkkkm222223tklttttttttttttttkkkkkgAAASSSQAD/AP8A/wD9ttttkm220kkkkkkkkkkkkm22221sktttttt//wD/AP2222222SSAJIAAAAAJJP8A/wD/AP8Attttsk2220kkkkkkkkkkkk22221skttttt//AP8A/wD/AP8A/wD/AP8A/wD7bbbaSSSQAAD/AP8A/wD/APbbbbZNtttpJJJJJJJJJJJJttttbJbbbbb/AP8A/wD/AP8A/wD/AP8A/wD/APttttttttpJJP8A/wD/AP8A9ttttsm2222222222kkkkkk2222sktttt/8A/wD/AP8A/wD/AP8A/wD/AP8A/wD+2kkkkkkkkv8A/wD/AP8A9ttttsk222222222220kkkkm222sktttt/8A/wD/AP8A2/bbbbbbbbbbbbSSSSSS/wD/AP8A/wD222222SfbbbbbbbbbbaSSSSbbbbSSW223/wD/AP8A92222222222222//ALbbbbZv/wD/AP8A9tttttklv22222222220kkkk2222kltlt/8A/wD/APttttttttttt/8A/wD/APbbbbZt/wD/AP8Attttttkkv22220kkk222kkkk2222kktltv8A/wD/ANttttttttt//wD/AP8Ab/7bJJJtt/8A7bbbbbbZJL9tttJJJJJtttJJJJtttpJLbLb/AP8A/wDbbbbbbbb/AP8A/wD23/6SSSSSbbbbbbbbbbbJJb9ttJJJJJJJttpJJJttttJJbJbf/wD+2222222//wD/AG3/AOkkm2kkkm2222222222yS37bbaSSSSSSbbaSSSbbbbSSSyW3/8A/ttttttt/wD/ANt/0kkm0kkkkm22222222222237bbaSSSSSSTbbSSSbbbbSSS2S3/8A/wDbbbbbb/8A/t/0kkm0kkm22v222222222222/bbbaSSSSSSTbbSSSbbbbSSSWS2/8A/wDbbbbbf/8A9v8ApJJpJJJtJJL/ALbbbbbbbbbbftttttJJJJJJNttJJJttttJJJZLb/wD/ANttttt//wC//SSaSSSTSSSS/wC2222222222/bbbbbSSSSSSSbbSSSbbbbSSSSSW/8A/wDbbbbb/wD9/wDpJtJJJJJJJJL/APbbbbbbbbbfttttttJJJJJJJttJJJttttJJJLJb/wD/ANttttv/AP3/AEk2kkkkkkkkkv/EABQRAQAAAAAAAAAAAAAAAAAAAOD/2gAIAQMBAT8QAAH/xAAUEQEAAAAAAAAAAAAAAAAAAADg/9oACAECAQE/EAAB/8QAIBABAQEBAAIDAAMBAAAAAAAAEQABEFBgIEBwMICwwP/aAAgBAQABPxD/AJvl4zMz7uzMzM8fdWZmZmZmZmZmZ9tZmZmZmZmZn4MzMzMz7EzMzMzMzMzMzMzMzMzMzxmZmZ9ZZmZmZmZmZmZmZmZmZmZmZmZmfgzPqbMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz6YzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmZn0ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmfMMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz49mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zZmZmfEMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bMzMzMzMzMz/A/RZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zbNs2zbNmZmZmZmZmZmZmZnr/AAPGZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmbNs2zbNs2zZmZmZmZmZmZmZmZmZmeMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bZtm2bZtmzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bZtm2bZtmzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bZtm2bMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bZtmzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzPGZmZmZmZmZmZmZmbNs2zZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZ4zMzMzMzMzPGZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmePGevWZ4zxmeMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM/TeM8eMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmfrMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM8ZmZmePGZn7T1mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmePHjPHr4VmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZ48eszPXjMzMzPHrx8czMzMzMzMzMzMzMzMzMzMzMzMzMzMz1n7j9FmZmfDszMzMzMzMzMzMzMzMzMzM+xMzMzMzMzMzMzMzMzMzPl3yTMzMzM9ZmZmfizPm2fJMzMz8GZmZnzz5Z68fi/3GI/sCf5Ox+Bnv5HvZ+AH4ERHvx+Bnv5/gBf/Z’); background-size: contain; } `)); document.head.appendChild(styleEl); }); })();
So how’s the performance? Well, as long as you don’t frequently change the background or adjust the blur radius, it’s about as fast as could be! Overall the performance characteristics of this technique are comparable to the method we showed you earlier for performant box shadow transitions.