Apply CSS `backdrop-filter` to polygon shape

Question

As per the two images below, I'm trying to create a "tooltip" with a statically sized triangle on the bottom. However, I want to apply backdrop-filter: blur(10px); to the entire shape. Currently the blur filter only applies to the rectangle and not the triangle.

 body { background: black; } .Tooltip { position: absolute; height: 300px; width: 200px; backdrop-filter: blur(10px); background: rgba(85, 85, 85, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.85); overflow: visible; } .Tooltip::before { background: rgba(85, 85, 85, 0.3); clip-path: polygon(100% 0, 100% 100%, 0 100%); content: ''; display: block; height: 20px; left: 50%; position: absolute; top: 100%; transform: translate(-50%, -50%) rotate(45deg); width: 20px; } .RedBar { position: absolute; top: 250px; left: 110px; height: 100px; width: 30px; background: red; }

 <div class="RedBar"></div> <div class="Tooltip"></div>

The shape:

The problem:

Answer 1

The only way to solve this (since I guess the backdrop-filter property is not supported (yet) while using pseudo elements) is to make the tooltip background a clip-path , so it's the shape of the tooltip. See below snippet for the code and check the full screen example.

A sidenote: your CSS was failing due to the incorrect declaration of rgba() . You cannot add a hex color to it. Fe rgba(#555555, 0.3); is wrong, it should be rgba(85, 85, 85, 0.3) , since it's the rgb code you need to write down.

 body { background: black; min-height: 500px; } .Tooltip { position: fixed; height: 400px; width: 200px; backdrop-filter: blur(10px); background: rgba(85, 85, 85, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.85); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 58% 76%, 49% 83%, 40% 75%, 0% 75%); overflow: visible; color: #fff; } .RedBar { position: fixed; top: 250px; left: 110px; height: 100px; width: 30px; background: red; }

 <div class="RedBar"></div> <div class="Tooltip">lentesque efficitur interdum elit, vel euismod lorem rutrum non. Etiam congue tortor rhoncus velit pharetra, nec ornare lacus hendrerit. Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum in. Cras vitae tortor nunc. Praesent elementum, massa at rhoncus ultrices, ligula dui finibus risus, sed sollicitudin orci neque sit amet libero. Ut volutpat urna id</div>

EDIT
Another outcome with adding an extra div that mimics as the triangle inside the tooltip. Still not the ideal solution.

 body { background: black; min-height: 500px; } .tooltip-wrapper { position: fixed; position: relative; } .tooltip { height: auto; width: auto; backdrop-filter: blur(10px); background: rgba(85, 85, 85, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.85); overflow: visible; color: #fff; margin-bottom: 20px; } .tooltip-arrow { backdrop-filter: blur(10px); clip-path: polygon(100% 0, 0 0, 50% 100%); background: rgba(85, 85, 85, 0.3); width: 20px; height: 15px; position: absolute; top: 100%; left: 50%; } .RedBar { position: fixed; top: 100px; left: 210px; height: 200px; width: 300px; background: red; }

 <div class="RedBar"></div> <div class="tooltip-wrapper"> <div class="tooltip">lentesque efficitur interdum elit, vel euismod lorem rutrum non. Etiam congue tortor rhoncus velit pharetra, nec ornare lacus hendrerit. Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum in. Cras vitae tortor nunc. Praesent elementum, massa at rhoncus ultrices, ligula dui finibus risus, sed sollicitudin orci neque sit amet libero. Ut volutpat urna id</div> <div class="tooltip-arrow"></div> </div>