Last active
June 14, 2025 01:21
-
Star
(158)
You must be signed in to star a gist -
Fork
(22)
You must be signed in to fork a gist
-
-
Save rebane2001/8ba35ad6e1b17c4cb5b2b2431d9e992c to your computer and use it in GitHub Desktop.
glass effect test css/svg thing (messy) - demo: https://codepen.io/rebane2001/details/OPVQXMv
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="position:absolute;top:-999px;left:-999px"> | |
| <svg | |
| id="effectSvg" | |
| width="200" | |
| height="200" | |
| viewBox="0 0 200 200" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="displacementFilter4"> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%230001' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing9" id="thing9" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF1' style='filter:blur(15px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing0" id="thing0" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing1" id="thing1" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='200' height='200' rx='25' fill='%237F7F7F' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%237F7F7FBB' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing2" id="thing2" /> | |
| <feGaussianBlur stdDeviation="0.7" id="preblur" in="SourceGraphic" result="preblur" /> | |
| <feDisplacementMap | |
| id="dispR" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-148" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="1 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp1" /> | |
| <feDisplacementMap | |
| id="dispG" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-150" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp2" /> | |
| <feDisplacementMap | |
| id="dispB" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-152" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 1 0" result="disp3" /> | |
| <feBlend in2="disp2" mode="screen"/> | |
| <feBlend in2="disp1" mode="screen"/> | |
| <feGaussianBlur stdDeviation="0.0" id="postblur" /> | |
| <feBlend in2="thing0" mode="screen"/> | |
| <feBlend in2="thing9" mode="multiply"/> | |
| <feComposite in2="thing1" operator="in"/> | |
| <feOffset dx="43" dy="43"/> | |
| </filter> | |
| </svg> | |
| </div> | |
| <div style="position:absolute;z-index:999999999;top:-1150px;left:-1150px;resize:both;min-width:1200px;min-height:1200px;overflow: hidden;display: flex;align-items: flex-end;justify-content: flex-end;clip-path: polygon(calc(100% - 120px) calc(100% - 120px), calc(100% - 120px) 100%, 100% 100%, 100% calc(100% - 120px));" id="draggable"><div id="preview" style="width:200px;height:200px;backdrop-filter:url(#displacementFilter4)/* brightness(0.95)*/;pointer-events: none;"></div></div> | |
| <style> | |
| body, html { | |
| background: #000; | |
| } | |
| #controls { | |
| background: #FFF; | |
| display:inline-flex; | |
| flex-direction: column; | |
| padding: 16px; | |
| border-radius: 16px; | |
| input[type=range] { | |
| width: 200px; | |
| } | |
| } | |
| </style> | |
| <div id="controls"> | |
| <label><input type="range" id="w" value="200" min="10" max="1000">Width</label> | |
| <label><input type="range" id="h" value="200" min="10" max="1000">Height</label> | |
| <label><input type="range" id="r" value="25" min="0" max="255">Corner Radius</label> | |
| <label><input type="range" id="d1" value="17" min="0" max="255">Darkness Opacity</label> | |
| <label><input type="range" id="d2" value="5" min="0" max="50">Darkness Blur</label> | |
| <label><input type="range" id="l1" value="17" min="0" max="255">Lightness Opacity</label> | |
| <label><input type="range" id="l2" value="15" min="0" max="50">Lightness Blur</label> | |
| <label><input type="range" id="c1" value="68" min="0" max="255">Center Distortion</label> | |
| <label><input type="range" id="c2" value="15" min="0" max="20">Center Size</label> | |
| <label><input type="range" id="b1" value="7" min="0" max="100">Pre-blur</label> | |
| <label><input type="range" id="b2" value="0" min="0" max="100">Post-blur</label> | |
| <label><input type="range" id="c4" value="20" min="0" max="50">Iridescence</label> | |
| </div> | |
| <script> | |
| const draggable = document.getElementById("draggable"); | |
| const preview = document.getElementById("preview"); | |
| const effectSvg = document.getElementById("effectSvg"); | |
| const thing9 = document.getElementById("thing9"); | |
| const thing0 = document.getElementById("thing0"); | |
| const thing1 = document.getElementById("thing1"); | |
| const thing2 = document.getElementById("thing2"); | |
| const preblur = document.getElementById("preblur"); | |
| const postblur = document.getElementById("postblur"); | |
| const dispR = document.getElementById("dispR"); | |
| const dispG = document.getElementById("dispG"); | |
| const dispB = document.getElementById("dispB"); | |
| function updateSettings() { | |
| const vals = {}; | |
| document.querySelectorAll("#controls input").forEach(e=>vals[e.id]=e.value); | |
| const w = vals.w; | |
| const h = vals.h; | |
| effectSvg.setAttribute("width", `${w}`); | |
| effectSvg.setAttribute("height", `${h}`); | |
| effectSvg.setAttribute("viewBox", `0 0 ${w} ${h}`); | |
| preview.style.width = `${parseFloat(w)+50}px`; | |
| preview.style.height = `${parseFloat(h)+50}px`; | |
| preview.style.translate = `${w/4}px ${h/4}px`; | |
| draggable.style.top = `${-1200+h/4}px`; | |
| draggable.style.left = `${-1200+w/4}px`; | |
| draggable.style.clipPath = `polygon(calc(100% - ${w/2+25}px) calc(100% - ${h/2+25}px), calc(100% - ${w/2+25}px) 100%, 100% 100%, 100% calc(100% - ${h/2+25}px))`; | |
| thing9.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%280 0 0 %2F${vals.d1/2.55}%25%29' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23FFF' style='filter:blur(${vals.d2}px)' /%3E%3C/svg%3E`); | |
| thing0.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%28255 255 255 %2F${vals.l1/2.55}%25%29' style='filter:blur(${vals.l2}px)' /%3E%3C/svg%3E`); | |
| thing1.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23000' /%3E%3C/svg%3E`); | |
| thing2.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='${w}' height='${h}' rx='${vals.r}' fill='%237F7F7F' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23000' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%28127 127 127 %2F${(255-vals.c1)/2.55}%25%29' style='filter:blur(${20-vals.c2}px)' /%3E%3C/svg%3E`); | |
| preblur.setAttribute("stdDeviation", `${vals.b1/10}`); | |
| postblur.setAttribute("stdDeviation", `${vals.b2/10}`); | |
| dispR.setAttribute("scale", `${-150+vals.c4/10}`); | |
| dispG.setAttribute("scale", `${-150}`); | |
| dispB.setAttribute("scale", `${-150-vals.c4/10}`); | |
| } | |
| document.querySelectorAll("#controls input").forEach(e => e.oninput = updateSettings); | |
| </script> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="position:absolute;top:-999px;left:-999px"> | |
| <svg | |
| width="200" | |
| height="200" | |
| viewBox="0 0 220 220" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="displacementFilter4"> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%230001' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing9" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF1' style='filter:blur(15px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing0" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing1" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='200' height='200' rx='25' fill='%237F7F7F' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%237F7F7FBB' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing2" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-148" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="1 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp1" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-150" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp2" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-152" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 1 0" result="disp3" /> | |
| <feBlend in2="disp2" mode="screen"/> | |
| <feBlend in2="disp1" mode="screen"/> | |
| <feGaussianBlur stdDeviation="0.7" /> | |
| <feBlend in2="thing0" mode="screen"/> | |
| <feBlend in2="thing9" mode="multiply"/> | |
| <feComposite in2="thing1" operator="in"/> | |
| <feOffset dx="43" dy="43"/> | |
| </filter> | |
| </svg> | |
| </div> | |
| <div style="position:absolute;z-index:999999999;top:-150px;left:-150px;resize:both;min-width:200px;min-height:200px;overflow: auto;display: flex;align-items: flex-end;justify-content: flex-end;"><div style="width:200px;height:200px;backdrop-filter:url(#displacementFilter4)/* brightness(0.95)*/;pointer-events: none;"></div></div> |
wowie
nice
hm
damn 🤤🤤🤤🤤
🔥
This is great, thanks!
I've been looking for this. Thank you so much!
wow
awesome
💦
So cool!
tyra 😮
possible to get version with dynamic sizing so it can be used as background for div of any size?
@Lenartb
could definitely do a dynamic version with arbitrary shapes and various settings, though idk if i should bother haha, i made this as just a proof of concept
added a version with controls ^_^
no arbitrary shapes atm but could be added later
nice one. you are one step closer to apple liquidass css framework haha
So pretty
This is sooo cooolll :0
incredible swag
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the