Shaders
header.lightDarkMode D
Gallery

A minimalist, ethereal shader effect featuring a soft, luminous background with a pale blue-white gradient transitioning from light cyan to off-white. The composition displays two rectangular glass-like shapes positioned in the upper-center and lower-right areas, with subtle transparency and frosted glass characteristics. A prominent curved swirl pattern emerges from the center, creating organic flowing lines that suggest movement and fluidity. The glass elements exhibit chromatic aberration effects with a slight rainbow-like refraction quality, enhanced by a fresnel lighting effect that creates subtle highlights along the edges. The overall atmosphere is serene and minimalist, with a soft film grain texture overlaid throughout, adding subtle noise and tactile quality. The lighting appears to come from the upper-left, creating gentle highlights on the glass surfaces. The color palette is dominated by cool, desaturated tones with high luminosity, creating a calm, frosted, and ethereal mood. The blur and refraction effects create a sense of depth and dimensionality despite the flat composition.

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.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>