Shaders
header.lightDarkMode D
Gallery

A smooth, blurred gradient background transitioning from pink and magenta in the upper left through coral and peach tones in the center-left, to purple and blue hues in the center and right portions, with cyan and turquoise accents in the lower right corner. The composition features a large, soft-edged blob shape with organic, undulating edges positioned slightly right of center, creating a focal point that blends from warm orange-gold tones to deep blue. The blob has a subtle highlight with a yellowish-green glow on its upper-left edge, giving it dimension and depth. A very fine white dot grid pattern is subtly visible throughout, adding texture without overwhelming the composition. The entire effect is unified by a liquify distortion that creates a fluid, melting quality to all elements, with soft feathered edges that blend seamlessly into the background. A barely perceptible film grain texture adds subtle noise across the entire surface. The overall mood is ethereal, dreamy, and contemporary, with smooth color transitions and no hard edges anywhere in the composition.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  DotGrid,
  FilmGrain,
  LinearGradient,
  Liquify
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#ff6b8a" color-b="#0ad4c8" color-space="oklch" edges="mirror" :end="{ x: 0.67, y: 0.28 }" :start="{ x: 0.23, y: 0.7 }" :visible="true" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.58, y: 0.42 }" color-a="#f5a623" color-b="#1b6baa" color-space="oklch" :deformation="0.7" highlight-color="#e0ff6a" :size="0.65" :softness="1.2" :speed="1" />
    <DotGrid blend-mode="linearDodge" :density="60" :dot-size="0.08" :opacity="0.15" />
    <Liquify :decay="2.2" edges="mirror" :intensity="1.2" :radius="2" />
    <FilmGrain :strength="0.22" />
  </Shader>
</template>