Shaders
header.lightDarkMode D
Gallery

A flowing gradient shader effect with smooth, organic color transitions creating a dreamy, ethereal atmosphere. The composition features a primary gradient flowing from white in the upper left corner through soft pink and magenta tones in the center, transitioning to vibrant purple and violet hues in the upper right, with warm peachy-orange tones emerging in the lower right corner. The gradient exhibits significant distortion with a 0.2 distortion value, creating soft, blurred color boundaries that blend seamlessly without hard edges. A subtle grid pattern with 30 cells is overlaid at 6% opacity using multiply blending mode, adding fine texture and structure while remaining nearly imperceptible. Fine film grain at 10% strength is applied across the entire surface, providing subtle noise that enhances the organic, natural quality of the effect. The overall mood is soft, romantic, and contemporary with a modern aesthetic. Colors flow dynamically with smooth interpolation in OKLab color space, creating perceptually uniform transitions. The effect has no rotation or offset, maintaining centered symmetry with transparent edges that fade naturally into the background.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  FlowingGradient,
  Grid
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FlowingGradient color-a="#ffffff" color-b="#fc9d77ff" color-c="#b108ff" color-d="#ff21d6" color-space="oklab" :distortion="0.2" :seed="32" :visible="true" />
    <Grid blend-mode="multiply" :cells="30" color="#000000" :opacity="0.06" :thickness="0.4" :visible="true" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>