Shaders
header.lightDarkMode D
Gallery

A soft, ethereal gradient background transitioning from purple and pink on the left side to warm orange and coral tones on the right side. The gradient flows horizontally with smooth color transitions. Overlaid on this gradient is a large, soft-edged circular shape with a pale pink/mauve color (#e49ede) positioned slightly off-center toward the lower-left area. The circle has significant softness (0.59 blur) creating a diffused, glowing halo effect that blends seamlessly with the background gradient. The overall composition has a dreamy, atmospheric quality enhanced by subtle wave distortion creating gentle undulations across the entire surface. A fine film grain texture (0.2 strength) adds subtle noise throughout, preventing the image from appearing too smooth and artificial. The glass effect with SVG shape overlay adds a subtle refractive quality with minimal chromatic aberration (0.93), creating a delicate glossy appearance. The lighting appears soft and diffused with no harsh shadows, creating a warm, inviting mood. The color space uses linear and oklab color spaces for smooth, natural blending.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#ca9afa" color-b="#d95222" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.36, y: 0.85 }" color="#e49ede" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#dacf8a" :stroke-thickness="0.2" />
    <WaveDistortion :angle="122" :speed="3.7" />
    <CursorRipples :decay="20" :intensity="20" :radius="1" />
    <FilmGrain :strength="0.2" />
    <Glass :aberration="0.93" :edge-softness="0.4" :inner-zoom="2" :refraction="0.54" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/EFaVkr2x3OsR_sdf.bin" :thickness="0.14" />
  </Shader>
</template>