Shaders
header.lightDarkMode D
Gallery

A sophisticated gradient shader effect transitioning from deep purple-blue on the left to bright cyan-blue on the right. The primary visual element is a radial gradient centered at approximately 77% horizontally and 43% vertically, creating a focal point of bright cyan (#0088ff) that gradually transitions to deep purple (#2f04e0). Overlaid on this gradient is a geometric grid pattern with 31 cells, rendered in white with 0.2 thickness, creating a perspective-distorted mesh that appears to stretch diagonally at 261 degrees from a point near the bottom-left. The grid lines are subtle but visible, creating a technical, digital aesthetic. A linear dodge blend mode on the stretch effect causes the grid to appear luminous and slightly glowing against the gradient background. The entire composition is softened by a diffuse blur with intensity of 2, creating a smooth, atmospheric quality that reduces the harshness of the geometric elements. Fine film grain with 0.2 strength is applied across the entire image, adding subtle texture and a cinematic quality. The overall mood is cool, technical, and ethereal, with a sense of depth created by the perspective distortion of the grid pattern. The lighting appears to emanate from the bright cyan focal point, creating a subtle glow effect throughout the composition.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <RadialGradient :center="{ x: 0.77, y: 0.43 }" color-a="#0088ff" color-b="#2f04e0" />
    <SimplexNoise id="idmjrn7fogx30o8e3em" :balance="-0.53" :contrast="3.7" :scale="0.9" :visible="false" />
    <Stretch :angle="261" blend-mode="linearDodge" :center="{ x: 0.36, y: 1 }" edges="mirror" :falloff="1">
      <Grid :cells="31" mask-source="idmjrn7fogx30o8e3em" mask-type="luminance" :thickness="0.2" />
    </Stretch>
    <DiffuseBlur :intensity="2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>