Shaders
header.lightDarkMode D
Gallery

A soft, ethereal gradient shader effect featuring a predominantly cool-toned color palette. The composition consists of a dark slate blue base (#2a3d5c) overlaid with three animated blob shapes that create a dreamy, atmospheric effect. The upper right area features a large lavender-to-light-blue blob (#a8c8e8 to #d4b8e0) with soft, organic edges and a subtle highlight at approximately 20% from the left and 30% from the top, creating dimension and depth. The left side contains a smaller teal-to-blue blob (#7eb8c9 to #94a3d1) positioned at roughly 12% horizontally and 25% vertically, with moderate softness and a cooler highlight. The lower center area features the largest blob (#c4aed0 to #8ba7bf), blending purple and muted blue tones with the highest softness value (3.0), creating a very diffuse, cloud-like appearance. All blobs have high deformation values (0.7-0.9), giving them organic, flowing shapes rather than perfect circles. A diffuse blur effect with 100% intensity is applied across the entire composition, creating a smooth, frosted glass aesthetic. The overall mood is serene and meditative, with soft light diffusion throughout, no hard edges, and a gentle gradient transition from darker tones in the lower left to lighter, more luminous areas in the upper right. The color space uses OKLCH for perceptually uniform color transitions.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  DiffuseBlur,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#2a3d5c" />
    <Blob :center="{ x: 0.82, y: 0.18 }" color-a="#a8c8e8" color-b="#d4b8e0" color-space="oklch" :deformation="0.7" highlight-color="#e0d4f0" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="55" :size="0.95" :softness="2.5" :speed="0.3" />
    <Blob :center="{ x: 0.12, y: 0.25 }" color-a="#7eb8c9" color-b="#94a3d1" color-space="oklch" :deformation="0.9" highlight-color="#b8d4e8" :highlight-x="0.4" :highlight-z="0.6" :seed="31" :size="0.75" :softness="2" :speed="0.28" />
    <Blob :center="{ x: 0.45, y: 0.85 }" color-a="#c4aed0" color-b="#8ba7bf" color-space="oklch" :deformation="0.85" highlight-color="#d0e0f0" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="14" :size="1.05" :softness="3" :speed="0.25" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>