• Typeset
  • Create
AppearanceLight & dark mode DOpen MenuM

Menu

  • Components
  • Typeset
  • Create
  • Changelog

Colors

  • Color Palettes
  • Palette Generator
  • Color Converter

Shaders

  • Shader Gallery
  • Shader Editor
  • Shader Docs

Mock

  • Mock Gallery
  • Mock Docs

Guides

  • What is Shaders?
  • Quickstart
  • Vue Quickstart
  • Composing Effects
  • Blending & Masking
  • Layout & Positioning
  • Transforms
  • Props & Reactivity
  • Dynamic Props
  • Hooks & Events
  • Color Space
  • Shape / SDF Effects
  • Performance
  • Nuxt / SSR
  • Telemetry
  • Shaders MCP (Pro)

Pro Notes

  • Adding Interactions - Interactive Components and Dynamic Prop Mapping
  • Color Spaces - Choosing How Colors Blend
  • Composition - Layering, Opacity, and Transparency
  • Dynamic Prop Mapping - Driving Props from Mouse, Animation, and Layers
  • Finishing Touches - Texture, Grain, and Ambient Motion
  • Hero Section Masking Techniques
  • Media Effects - Images, Video, and Webcam
  • Shape Effects - Placement, Sizing, and Stacking

Components

  • AngularBlur
  • Ascii
  • Aurora
  • BarShift
  • Beam
  • Blob
  • Blur
  • BrickPattern
  • BrightnessContrast
  • Bulge
  • ChannelBlur
  • Checkerboard
  • Chevron
  • ChromaFlow
  • ChromaticAberration
  • Circle
  • ColorWheel
  • ConcentricSpin
  • ConicGradient
  • ContourLines
  • Crescent
  • Cross
  • CRTScreen
  • Crystal
  • CursorRipples
  • CursorTrail
  • DiamondGradient
  • DiffuseBlur
  • Dither
  • DOMTexture
  • DotGrid
  • DropShadow
  • Duotone
  • Ellipse
  • Emboss
  • FallingLines
  • FilmGrain
  • FloatingParticles
  • Flower
  • FlowField
  • FlowingGradient
  • FlutedGlass
  • Fog
  • Form3D
  • FractalNoise
  • Glass
  • GlassTiles
  • Glitch
  • Glow
  • Godrays
  • Grayscale
  • Grid
  • GridDistortion
  • Group
  • Halftone
  • HexGrid
  • HueShift
  • ImageTexture
  • Invert
  • Kaleidoscope
  • LensFlare
  • LinearBlur
  • LinearGradient
  • Liquify
  • Marble
  • Mirror
  • MultiPointGradient
  • Neon
  • Paper
  • Perspective
  • Pixelate
  • Plasma
  • PolarCoordinates
  • Polygon
  • Posterize
  • ProgressiveBlur
  • RadialGradient
  • RectangularCoordinates
  • ReflectivePlane
  • Ring
  • Ripples
  • RoundedRect
  • Saturation
  • Sharpness
  • Shatter
  • SimplexNoise
  • SineWave
  • Smoke
  • SmokeFill
  • Solarize
  • SolidColor
  • Spherize
  • Spiral
  • Star
  • Strands
  • Stretch
  • Stripes
  • StudioBackground
  • SunBurst
  • Swirl
  • TiltShift
  • Tint
  • Trapezoid
  • Tritone
  • Truchet
  • Twirl
  • Vesica
  • VHS
  • Vibrance
  • VideoTexture
  • Vignette
  • Voronoi
  • WaveDistortion
  • Weave
  • WebcamTexture
  • WorleyNoise
  • ZoomBlur

Shaders

767 GPU presets for backgrounds, logos and images. Open one to run it live, tune it in the editor, and export the Vue code or an image.

Open EditorRead the Docs

1 preset

  • Daisy WaveBackground

    A gradient shader effect displaying a dense grid of asterisk-like symbols (*) arranged in rows and columns against a dark background. The symbols transition through a color gradient from bright golden yellow (#ffd700) on the left side to progressively warmer orange and reddish tones (#ff6b35) toward the right side, creating a smooth chromatic transition. The background is a very dark purple-black (#1a0f2e), providing high contrast. The symbols appear to fade and become less visible toward the right edge, suggesting a mask or opacity gradient following a sine wave pattern at an 288-degree angle. The overall effect creates a sense of depth and movement, with the wavy distortion pattern visible in how the symbol density and color intensity shift across the composition. A subtle film grain texture overlays the entire image at 12% strength, adding a slight noise characteristic. The spacing between symbols is uniform and consistent, creating a regular grid pattern that emphasizes the smooth color and opacity transitions. The mood is atmospheric and digital, with a warm color palette that evokes heat or energy flowing from left to right.