Shaders
header.lightDarkMode D
Gallery

Frosted Glass 13

Frosted Glass

A modern shader effect composition featuring layered geometric elements with a vibrant magenta and white color scheme. The background displays diagonal sweeping bands of magenta (#df0eff) with soft blur and feathered edges creating a sense of motion and depth. Overlaid on this are three white rectangular/square shapes with subtle glass-like properties, featuring soft edges and a slight frosted appearance. A prominent curved magenta shape with a glass effect sits centrally, creating a lens-like distortion that refracts the background colors. The overall aesthetic combines a swirl effect in the background (light blue-gray tones), sine wave patterns creating the diagonal magenta stripes with softness and amplitude variation, and a glass morphism effect on the geometric shapes with chromatic aberration (0.64 intensity) and refraction properties. A fine film grain texture is applied across the entire composition at 0.3 strength, adding subtle noise and tactile quality. The lighting appears to come from approximately 237 degrees, creating subtle fresnel highlights on the glass elements. The composition has a contemporary, minimalist design with a dreamy, ethereal quality enhanced by the blur and transparency effects.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#ebf6ff" color-b="#d3e4f0" :detail="1.5" />
    <SineWave :amplitude="0.4" :angle="57" color="#df0eff" :frequency="2.8" :position="{ x: 1, y: 0.48 }" :softness="0.3" :thickness="1.6" />
    <Glass :aberration="0.64" :blur="20" :edge-softness="0.05" :fresnel="0.03" :fresnel-softness="1" :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>