Linear Fractal Glass

Name: Business Wish UI Components & Developer Tools
Availability: InStock
Rating: 4.8 (200 reviews)
Author: Abhay Singh Rathore

Generate fluted, ribbed, and ribbed refractive glass effects

Glass Properties

Rib Count (Density)24

Number of vertical segments

Refraction Strength30

Intensity of the spatial shift

Blur Depth8px

Light/Rib Angle0°

Rotation angle of the flutes

Loading preview...

SVG Filter Definition

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <filter id="fractal-glass-filter" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Import the displacement map Image -->
      <feImage href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201000%201000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22rib%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23808080%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2215%25%22%20stop-color%3D%22%23aaaaaa%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2285%25%22%20stop-color%3D%22%23aaaaaa%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23808080%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%0A%20%20%20%20%3Cpattern%20id%3D%22rib-pattern%22%20width%3D%2241.666666666666664%22%20height%3D%221000%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(0)%22%3E%0A%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23rib)%22%20%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23rib-pattern)%22%20%2F%3E%0A%3C%2Fsvg%3E" result="map" preserveAspectRatio="none" />
      
      <!-- 2. Apply Displacement -->
      <feDisplacementMap 
        in="SourceGraphic" 
        in2="map" 
        scale="30" 
        xChannelSelector="R" 
        yChannelSelector="G" 
        result="displaced"
      />
      
      <!-- 3. Blur the displaced result -->
      <feGaussianBlur in="displaced" stdDeviation="8" result="blurred" />
    </filter>
  </defs>
</svg>

CSS Application

.fractal-glass-panel {
  position: relative;
  /* Apply the complex refraction/blur SVG filter */
  filter: url('#fractal-glass-filter');
}

/* Optional: Add specular highlights based on the ribs via pseudo-element */
.fractal-glass-panel::after {
  content: '';
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) calc(100% / 24 * 0.5),
    rgba(0, 0, 0, 0.1) calc(100% / 24),
    rgba(255, 255, 255, 0) calc(100% / 24)
  );
  transform: rotate(0deg);
  border-radius: inherit;
}