Shaders
header.lightDarkMode D
Gallery

A vibrant gradient background transitioning from deep blue in the upper corners to cyan and light-green in the center, then to yellow-green at the bottom. The background uses a radial gradient centered lower on the canvas, creating a smooth color flow from cool to warm tones. Overlaid on this gradient is a stylized four-circle logo design composed of geometric shapes - two circles at the top and two at the bottom arranged in a clover-like pattern. The logo features a soft peachy-yellow outline with semi-transparent fills that reveal the gradient beneath. A dynamic plasma effect with magenta and yellow tones creates organic, flowing distortions across the logo shapes, giving them an animated, liquid quality. The plasma effect is masked to the logo outline, creating sharp boundaries between the effect and background. A subtle dither pattern with white pixels is applied using a linear dodge blend mode, adding a fine grainy texture and luminous quality to the entire composition. The overall effect is modern, colorful, and has a soft, glowing aesthetic with smooth color transitions and organic movement.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  ImageTexture,
  Plasma,
  RadialGradient
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ImageTexture id="idmmaykb1vflvohydj1" object-fit="contain" :transform="{ scale: 0.6 }" url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/c42DCkk-W-da.svg" :visible="false" />
    <RadialGradient :center="{ x: 0.5, y: 1 }" color-a="#92bf37" color-b="#1d5eac" color-space="oklab" :radius="1.2" />
    <Plasma :balance="55" color-a="#ae1f82" color-b="#cccb3d" color-space="oklab" :density="1.7" :intensity="3" mask-source="idmmaykb1vflvohydj1" />
    <Dither blend-mode="linearDodge" color-mode="source" pattern="bayer8" :pixel-size="3" :threshold="0.96" />
  </Shader>
</template>