Spray Paint

Open in editor

A vibrant gradient shader effect featuring a deep purple base (#7718ca) with three animated blob shapes creating a fluid, organic composition. The primary blob in the upper-right area blends pink (#fd79a8) and yellow (#ffc34d) tones with soft, diffused edges and a warm highlight. A secondary blob in the lower-right displays blue-purple gradients (#7261ff to #a29bfe) with moderate deformation and cooler highlights. A third blob on the left side features magenta-pink tones (#ff6b9d to #f55f8a) with enhanced softness and subtle yellow highlights. All blobs have organic, morphing shapes with smooth transitions between colors, creating a dreamy, ethereal atmosphere. The entire composition is unified by a diffuse blur effect (intensity 100) that softens edges and creates a cohesive, glowing quality. The color transitions are smooth and gradient-based, with highlights positioned to create depth and dimension. The overall mood is modern, energetic, and visually soothing with a contemporary design aesthetic.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#7718ca" />
    <Blob :center="{ x: 0.66, y: 0.34 }" color-a="#fd79a8" color-b="#ffc34d" color-space="oklch" :deformation="0.6" highlight-color="#ffeaa7" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="42" :size="0.65" :softness="2" :speed="0.35" />
    <Blob :center="{ x: 0.77, y: 0.73 }" color-a="#7261ff" color-b="#a29bfe" color-space="oklch" :deformation="0.8" highlight-color="#74b9ff" :highlight-x="0.4" :highlight-z="0.6" :seed="23" :size="0.6" :softness="2" :speed="0.25" />
    <Blob :center="{ x: 0.2, y: 0.63 }" color-a="#ff6b9d" color-b="#f55f8a" color-space="oklch" :deformation="0.7" highlight-color="#ffd93d" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="7" :size="0.7" :softness="3" :speed="0.3" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>