Shaders
header.lightDarkMode D
Gallery

A vibrant gradient background transitioning horizontally from hot pink (#ff3d6b) on the left through magenta and purple in the center to cyan (#0af0e8) on the right. Overlaid on this gradient is a large, soft-edged yellow circle (#ffe014) positioned in the lower-center area with significant blur and feathering, creating a glowing orb effect. The yellow circle has a subtle magenta stroke outline. A hexagonal glass shape with chromatic aberration and refraction effects is centered in the composition, creating a frosted glass appearance with light refractions and highlights. The glass element shows iridescent color shifts and subtle internal distortions. Wave distortion effects create subtle undulating ripples across the entire composition at a 122-degree angle. Cursor ripples with chromatic splitting add interactive shimmer effects. Fine film grain texture overlays the entire image at low opacity, adding subtle noise and texture. The overall mood is modern, dreamy, and ethereal with a soft, glowing aesthetic. The color space uses OKLAB for smooth color transitions and linear gradients for precise color blending.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Circle,
  CursorRipples,
  FilmGrain,
  Glass,
  LinearGradient,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#ff3d6b" color-b="#0af0e8" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.48, y: 0.85 }" color="#ffe014" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#e020e8" :stroke-thickness="0.2" />
    <WaveDistortion :angle="122" :speed="3.7" />
    <CursorRipples :decay="20" :intensity="20" :radius="1" />
    <FilmGrain :strength="0.2" />
    <Glass :aberration="0.93" :edge-softness="0.4" :inner-zoom="2" :refraction="0.54" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/EFaVkr2x3OsR_sdf.bin" :thickness="0.14" />
  </Shader>
</template>