Shaders
header.lightDarkMode D
Gallery

A soft, blurred gradient shader effect featuring a warm-to-cool color transition. The composition centers on warm peachy-tan and terracotta tones in the upper-left and center areas, gradually transitioning to cool blue and slate tones on the right and lower portions. Three organic blob shapes with soft, diffused edges create the primary visual elements: a warm peachy blob in the upper-center area with subtle highlight at approximately 20% from left and 30% from top, a blue-toned blob in the lower-right quadrant with softer highlights, and a warm brown-tan blob in the lower-left area. The entire composition is unified by a dark navy blue base layer (#1a2e4a) that provides depth. A diffuse blur effect with 100% intensity creates a smooth, dreamy quality with no sharp edges, making the overall image appear soft-focused and atmospheric. The blobs feature internal deformation creating organic, slightly irregular shapes rather than perfect circles. Subtle highlight colors (wheat, light blue, and cream tones) add dimension and a three-dimensional quality to each blob. The overall mood is calming and ethereal, with warm and cool tones creating visual balance.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#1a2e4a" />
    <Blob :center="{ x: 0.58, y: 0.28 }" color-a="#e8a87c" color-b="#c38d6e" color-space="oklch" :deformation="0.7" highlight-color="#f5deb3" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="38" :size="0.7" :softness="2" :speed="0.3" />
    <Blob :center="{ x: 0.82, y: 0.62 }" color-a="#5b7ea1" color-b="#8faabe" color-space="oklch" :deformation="0.75" highlight-color="#a8c8e0" :highlight-x="0.4" :highlight-z="0.6" :seed="19" :size="0.65" :softness="2.5" :speed="0.28" />
    <Blob :center="{ x: 0.25, y: 0.72 }" color-a="#d4956b" color-b="#9b6b4a" color-space="oklch" :deformation="0.65" highlight-color="#e8c9a0" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="12" :size="0.75" :softness="2.5" :speed="0.32" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>