Gradient Grid 6
Gradient GridA fluid, organic gradient shader effect featuring a smooth blend of warm colors transitioning across the canvas. The primary composition shows deep dark purple (#0a0015) in the lower left corner, flowing diagonally upward and rightward through burnt orange (#c4421a) and bright orange (#ff8c2e), with vibrant magenta-red (#e6174b) accents distributed throughout the upper and right portions. The gradient exhibits soft, blurred transitions with a flowing, liquid-like quality created by the 0.2 distortion parameter, giving the effect an ethereal, almost smoky appearance. A subtle grid pattern with 30 cells is barely visible, rendered in white at 0.01 opacity with linear dodge blending, adding fine texture detail without overwhelming the gradient. Fine film grain at 0.1 strength is applied uniformly across the entire surface, creating a subtle cinematic texture that enhances the depth and prevents the gradient from appearing too smooth or artificial. The overall mood is warm, energetic, and atmospheric, with a sense of movement and fluidity. The edges fade to transparency, creating a seamless blend. The color space uses OKLCH for perceptually uniform color transitions.
Code
<script setup lang="ts">
import {
Shader,
FilmGrain,
FlowingGradient,
Grid
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<FlowingGradient color-b="#c4421a" color-c="#ff8c2e" color-d="#e6174b" :distortion="0.2" :seed="40" :visible="true" />
<Grid blend-mode="linearDodge" :cells="30" :opacity="0.01" :thickness="0.4" />
<FilmGrain :strength="0.1" />
</Shader>
</template>