Frosted Glass 11

A sophisticated glass morphism shader effect featuring a frosted glass aesthetic with subtle swirling patterns. The composition consists of two overlapping rectangular shapes with rounded corners positioned in the center-right area of the canvas. The primary shape exhibits a soft, translucent quality with a light blue-white gradient transitioning from #ebf6ff to #d3e4f0. A secondary glass element overlays the composition with chromatic aberration effects (0.55 intensity) creating subtle color fringing at edges. The glass surface demonstrates realistic refraction properties with a fresnel effect (0.08 intensity) producing subtle highlights along the edges, particularly visible on the upper-left and lower-right boundaries. A swirling motion effect with speed 1 and detail 1.5 creates organic, flowing patterns within the glass surfaces. The overall atmosphere is ethereal and minimalist, set against a soft, neutral gray background (#d3e4f0). Film grain texture with 0.3 strength adds subtle noise throughout, enhancing the tactile quality. The lighting angle at 336 degrees creates directional highlights with 0.2 intensity, producing a gentle luminous quality. Edge softness of 0.05 creates smooth transitions between the glass shapes and background.

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.55" :edge-softness="0.05" :fresnel="0.08" :fresnel-softness="0.64" :highlight="0.2" :highlight-softness="0.46" :light-angle="336" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/3qJFWUS-Vtnm_sdf.bin" :thickness="1" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>