• 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

  • Spray Paint GridBackground

    A dynamic gradient shader effect transitioning from deep blue in the upper left to vibrant magenta and pink tones in the lower right. The composition features a dark navy background (#08071a) overlaid with two sine wave components creating flowing diagonal patterns. A blue sine wave (#1733a3) positioned in the upper-left area creates smooth undulating curves at 144 degrees, while a bright magenta sine wave (#ff006e) positioned center-right generates more pronounced wave patterns at 169 degrees. A sawtooth wave distortion at 210 degrees with 0.71 strength creates a geometric, faceted appearance throughout. The entire effect is unified by a glass tiles pattern with 16 tiles and 0.62 roundness, creating a crystalline, pixelated mosaic structure that fragments the underlying gradients into small cubic/diamond-shaped segments with subtle depth. A diffuse blur with 80 intensity softens and blends the color transitions, creating a dreamy, atmospheric quality. Film grain at 0.07 strength adds subtle texture and noise. The overall mood is cyberpunk and ethereal, with smooth color gradients interrupted by sharp geometric tiling patterns, creating visual tension between fluidity and structure.