Frosted Glass 9

A sophisticated glass morphism effect featuring a white architectural shape (resembling a curved bracket or parenthesis) with a frosted glass appearance. The shape is centered in the composition and exhibits strong light refraction and chromatic aberration effects, creating subtle rainbow-like color shifts along its edges. The background consists of a soft, swirling gradient transitioning between very light blue (#ebf6ff) and muted gray-blue (#d3e4f0) tones, creating a calm, ethereal atmosphere. The glass element has a thickness-based edge definition with a fresnel effect that creates bright white highlights particularly visible on the outer curved edges. A subtle film grain texture overlays the entire composition, adding tactile quality and reducing digital smoothness. The overall effect is luminous and translucent, with the glass shape appearing to refract and distort the background gradient beneath it. The lighting angle creates directional highlights that enhance the three-dimensional glass quality. The composition has a minimalist, modern aesthetic with soft, diffused lighting that creates a dreamy, frosted appearance throughout.

Code

vue

<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Glass,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#ebf6ff" color-b="#d3e4f0" :detail="1.5" />
    <Glass :aberration="0.64" :blur="20" :edge-softness="0.05" :fresnel="0.23" :fresnel-softness="2" :highlight="0" :highlight-softness="1" :inner-zoom="2" :light-angle="237" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/3qJFWUS-Vtnm_sdf.bin" :thickness="0.03" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>