<!-- wp:greenshift-blocks/element {"id":"gsbp-1aa02be","type":"inner","localId":"gsbp-1aa02be","styleAttributes":{"height":["350px"],"position":["relative"]},"cursorEffect":false,"cursorEffectOptions":{"shiftX":"50","shiftY":"50"}} -->
<div class="gsbp-1aa02be"><!-- wp:greenshift-blocks/element {"id":"gsbp-ebdc4a0","textContent":"Simple Glass Effect","localId":"gsbp-ebdc4a0","styleAttributes":{"width":["200px"],"height":["80px"],"position":["absolute"],"borderBottomLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dsmall, 10px)"],"borderBottomRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dsmall, 10px)"],"borderTopLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dsmall, 10px)"],"borderTopRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dsmall, 10px)"],"borderRadiusCustom_Extra":false,"borderRadiusLink_Extra":true,"backgroundColor":["#ffffff38"],"zIndex":["2"],"left":["65px"],"top":["30px"],"backdropFilterLink_Extra":{"blur":true},"blur_backdrop_Extra":["10px"],"backdropFilter":["blur(10px)"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#ffffff1c"],"fontSize":["15px"],"display":["inline-flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"textAlign":["center"],"color":["#ffffff"]},"cursorEffect":true,"cursorEffectOptions":{"shiftX":"40","shiftY":"40"},"metadata":{"name":"Simple Glass"}} -->
<div class="gsbp-ebdc4a0" data-cursor-effect="{"shiftX":"40","shiftY":"40"}">Simple Glass Effect</div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-3ef1685","textContent":"Advanced Glass Effect","localId":"gsbp-3ef1685","styleAttributes":{"width":["200px"],"height":["80px"],"position":["absolute"],"backgroundColor":["#ffffff38"],"zIndex":["2"],"top":["130px"],"fontSize":["15px"],"display":["inline-flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"textAlign":["center"],"color":["#ffffff"],"right":["65px"],"customCSS_Extra":"{CURRENT}::before {\n content: \u0022\u0022;\n position: absolute;\n inset: 0;\n border-radius: 10px;\n padding: 1px;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.25),\n rgba(255, 255, 255, 0.02)\n );\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none; \n}\n{CURRENT}{\n border-radius:10px;\n}\n{CURRENT}:after{\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-radius: 10px;\n backdrop-filter: blur(8px);\n filter: url(#glass-distortion);\n isolation: isolate;\n}"},"cursorEffect":true,"cursorEffectOptions":{"shiftX":"50","shiftY":"50"},"metadata":{"name":"Advanced Glass"}} -->
<div class="gsbp-3ef1685" data-cursor-effect="{"shiftX":"50","shiftY":"50"}">Advanced Glass Effect</div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-a4cb160","tag":"img","localId":"gsbp-a4cb160","src":"https://greenshift.wpsoul.net/wp-content/uploads/2025/10/sizam_blue_and_yellow_4b7de0ec-7d4f-4ac7-ada0-452a8b7ed19e.webp","alt":"","mediaid":4784,"originalWidth":1728,"originalHeight":864,"styleAttributes":{"borderBottomLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dmedium, 15px)"],"borderBottomRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dmedium, 15px)"],"borderTopLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dmedium, 15px)"],"borderTopRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dmedium, 15px)"],"borderRadiusCustom_Extra":false,"borderRadiusLink_Extra":true}} -->
<img class="gsbp-a4cb160" src="https://greenshift.wpsoul.net/wp-content/uploads/2025/10/sizam_blue_and_yellow_4b7de0ec-7d4f-4ac7-ada0-452a8b7ed19e.webp" alt="" width="1728" height="864" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-58a65fc","tag":"svg","icon":{"icon":{"font":"rhicon rhi-check","svg":"\u003csvg\n xmlns=\u0022http://www.w3.org/2000/svg\u0022\n width=\u00220\u0022\n height=\u00220\u0022\n style=\u0022position:absolute; overflow:hidden\u0022\n className=\u0022hidden\u0022\n\u003e\n \u003cdefs\u003e\n \u003cfilter\n id=\u0022glass-distortion\u0022\n x=\u00220%\u0022\n y=\u00220%\u0022\n width=\u0022100%\u0022\n height=\u0022100%\u0022\n className=\u0022hidden\u0022\n \u003e\n \u003cfeTurbulence \n type=\u0022fractalNoise\u0022\n baseFrequency=\u00220.008 0.008\u0022\n numOctaves=\u00222\u0022\n seed=\u002292\u0022\n result=\u0022noise\u0022\n className=\u0022hidden\u0022\n /\u003e\n \u003cfeGaussianBlur\n in=\u0022noise\u0022\n stdDeviation=\u00222\u0022\n result=\u0022blurred\u0022\n className=\u0022hidden\u0022\n /\u003e\n \u003cfeDisplacementMap\n in=\u0022SourceGraphic\u0022\n in2=\u0022blurred\u0022\n scale=\u002277\u0022\n xChannelSelector=\u0022R\u0022\n yChannelSelector=\u0022G\u0022\n className=\u0022hidden\u0022\n /\u003e\n \u003c/filter\u003e\n \u003c/defs\u003e\n\u003c/svg\u003e","image":""},"type":"svg"},"localId":"gsbp-58a65fc","styleAttributes":{"display":["none"]},"metadata":{"name":"Filter SVG - do not remove"}} -->
<svg viewBox="0 0 100 100" width="0" height="0" class="gsbp-58a65fc">
<defs xmlns="http://www.w3.org/2000/svg">
<filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" classname="hidden">
<feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise" classname="hidden"/>
<feGaussianBlur in="noise" stdDeviation="2" result="blurred" classname="hidden"/>
<feDisplacementMap in="SourceGraphic" in2="blurred" scale="77" xChannelSelector="R" yChannelSelector="G" classname="hidden"/>
</filter>
</defs>
</svg>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>There are two ways to make glass effect. First is simple, it's when you use backdrop-filter with blur + background with partial opacity. You can add it in Effect panel</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":4786,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshift.wpsoul.net/wp-content/uploads/2025/10/CleanShot-2025-10-04-at-15.05.12@2x.webp" alt="" class="wp-image-4786" style="width:300px"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Second is more advanced with distortion. For this, you will need to have special SVG Image, so copy next block on page, you can put it in footer or in any place, it's just must be somewhere on page</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":4787,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshift.wpsoul.net/wp-content/uploads/2025/10/CleanShot-2025-10-04-at-15.06.40@2x.webp" alt="" class="wp-image-4787" style="width:300px"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Now, you will need next code to be added in Custom css of block</p>
<!-- /wp:paragraph -->
<!-- wp:code -->
<pre class="wp-block-code"><code>{CURRENT}::before {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
padding: 1px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.25),
rgba(255, 255, 255, 0.02)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
{CURRENT}{
border-radius:10px;
}
{CURRENT}:after{
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 10px;
backdrop-filter: blur(8px);
filter: url(#glass-distortion);
isolation: isolate;
}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph -->
<p>This code includes not only blur effect but also partial transparent border. If you need only blur, then use </p>
<!-- /wp:paragraph -->
<!-- wp:code -->
<pre class="wp-block-code"><code>{CURRENT}:after{
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 10px;
backdrop-filter: blur(8px);
filter: url(#glass-distortion);
isolation: isolate;
}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph -->
<p>If you add border radius, make sure that you added it the same across whole code</p>
<!-- /wp:paragraph -->
Glass effects
Simple Glass Effect
Advanced Glass Effect
There are two ways to make glass effect. First is simple, it’s when you use backdrop-filter with blur + background with partial opacity. You can add it in Effect panel
Second is more advanced with distortion. For this, you will need to have special SVG Image, so copy next block on page, you can put it in footer or in any place, it’s just must be somewhere on page
Now, you will need next code to be added in Custom css of block
