Shaders
header.lightDarkMode D
Gallery

A smooth, flowing gradient shader effect with a soft, dreamlike quality. The composition features a multi-point gradient that transitions from deep blue (#4776E6) in the upper left corner, flowing through vibrant magenta and purple tones (#C44DFF) across the top and right edges, with warm peachy-orange (#FF8C42) emerging from the lower left-center area, and soft pink (#F8BBD9) blending throughout the middle and right sections. The gradient points are strategically positioned to create diagonal flow from upper-left to lower-right. A subtle wave distortion effect (78-degree angle, triangle wave type) creates gentle undulating ripples across the entire surface, giving the gradient a liquid, organic quality. The liquify effect with moderate intensity (10) and stiffness (15) adds soft, fluid warping that makes the color transitions appear to flow like liquid paint. A fine paper texture with minimal roughness (0.1) provides subtle surface detail without disrupting the smooth gradient. Film grain at 0.4 strength adds a delicate cinematic quality and slight noise texture. The overall effect is a soft, ethereal gradient with subtle movement and texture, creating a calming, contemporary aesthetic suitable for modern design backgrounds. The smoothness value of 2 ensures the color transitions are gradual and blended rather than sharp.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Liquify,
  MultiPointGradient,
  Paper,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-c="#1a6bbc" :position-a="{ x: 0.24, y: 0.08 }" :position-c="{ x: 0.07, y: 0.65 }" :position-d="{ x: 0.9, y: 0.7 }" :position-e="{ x: 0.42, y: 1 }" />
    <WaveDistortion :angle="78" :frequency="1.6" :strength="0.25" wave-type="triangle" />
    <Liquify :damping="0.7" :radius="1.5" :stiffness="15" />
    <Paper :displacement="1" :grain-scale="0.1" :roughness="0.1" :seed="26" />
    <FilmGrain :strength="0.4" />
  </Shader>
</template>