Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
import GlassSurface from './GlassSurface'
// Basic usage
// Custom displacement effects
Advanced Glass Distortion
import { useEffect, useRef, useId } from 'react';
import './GlassSurface.css';
const GlassSurface = ({
children,
width = 200,
height = 80,
borderRadius = 20,
borderWidth = 0.07,
brightness = 50,
opacity = 0.93,
blur = 11,
displace = 0,
backgroundOpacity = 0,
saturation = 1,
distortionScale = -180,
redOffset = 0,
greenOffset = 10,
blueOffset = 20,
xChannel = 'R',
yChannel = 'G',
mixBlendMode = 'difference',
className = '',
style = {}
}) => {
const uniqueId = useId().replace(/:/g, '-');
const filterId = `glass-filter-${uniqueId}`;
const redGradId = `red-grad-${uniqueId}`;
const blueGradId = `blue-grad-${uniqueId}`;
const containerRef = useRef(null);
const feImageRef = useRef(null);
const redChannelRef = useRef(null);
const greenChannelRef = useRef(null);
const blueChannelRef = useRef(null);
const gaussianBlurRef = useRef(null);
const generateDisplacementMap = () => {
const rect = containerRef.current?.getBoundingClientRect();
const actualWidth = rect?.width || 400;
const actualHeight = rect?.height || 200;
const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
const svgContent = `
`;
return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
};
const updateDisplacementMap = () => {
feImageRef.current?.setAttribute('href', generateDisplacementMap());
};
useEffect(() => {
updateDisplacementMap();
[
{ ref: redChannelRef, offset: redOffset },
{ ref: greenChannelRef, offset: greenOffset },
{ ref: blueChannelRef, offset: blueOffset }
].forEach(({ ref, offset }) => {
if (ref.current) {
ref.current.setAttribute('scale', (distortionScale + offset).toString());
ref.current.setAttribute('xChannelSelector', xChannel);
ref.current.setAttribute('yChannelSelector', yChannel);
}
});
gaussianBlurRef.current?.setAttribute('stdDeviation', displace.toString());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
width,
height,
borderRadius,
borderWidth,
brightness,
opacity,
blur,
displace,
distortionScale,
redOffset,
greenOffset,
blueOffset,
xChannel,
yChannel,
mixBlendMode
]);
useEffect(() => {
if (!containerRef.current) return;
const resizeObserver = new ResizeObserver(() => {
setTimeout(updateDisplacementMap, 0);
});
resizeObserver.observe(containerRef.current);
return () => {
resizeObserver.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (!containerRef.current) return;
const resizeObserver = new ResizeObserver(() => {
setTimeout(updateDisplacementMap, 0);
});
resizeObserver.observe(containerRef.current);
return () => {
resizeObserver.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
setTimeout(updateDisplacementMap, 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [width, height]);
const supportsSVGFilters = () => {
const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
const isFirefox = /Firefox/.test(navigator.userAgent);
if (isWebkit || isFirefox) {
return false;
}
const div = document.createElement('div');
div.style.backdropFilter = `url(#${filterId})`;
return div.style.backdropFilter !== '';
};
const containerStyle = {
...style,
width: typeof width === 'number' ? `${width}px` : width,
height: typeof height === 'number' ? `${height}px` : height,
borderRadius: `${borderRadius}px`,
'--glass-frost': backgroundOpacity,
'--glass-saturation': saturation,
'--filter-id': `url(#${filterId})`
};
return (
);
};
export default GlassSurface;
.glass-surface {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.26s ease-out;
}
.glass-surface__filter {
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
inset: 0;
opacity: 0;
z-index: -1;
}
.glass-surface__content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: inherit;
position: relative;
z-index: 1;
}
.glass-surface--svg {
background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
box-shadow:
0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
inset,
0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
inset,
0px 4px 16px rgba(17, 17, 26, 0.05),
0px 8px 24px rgba(17, 17, 26, 0.05),
0px 16px 56px rgba(17, 17, 26, 0.05),
0px 4px 16px rgba(17, 17, 26, 0.05) inset,
0px 8px 24px rgba(17, 17, 26, 0.05) inset,
0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px 0 rgba(31, 38, 135, 0.2),
0 2px 16px 0 rgba(31, 38, 135, 0.1),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
}
}
@supports not (backdrop-filter: blur(10px)) {
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
}
.glass-surface--fallback::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
border-radius: inherit;
z-index: -1;
}
}
@supports not (backdrop-filter: blur(10px)) {
@media (prefers-color-scheme: dark) {
.glass-surface--fallback {
background: rgba(0, 0, 0, 0.4);
}
.glass-surface--fallback::before {
background: rgba(255, 255, 255, 0.05);
}
}
}
.glass-surface:focus-visible {
outline: 2px solid light-dark(#007aff, #0a84ff);
outline-offset: 2px;
}
Glass Surface Content
{children}