• 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

  • Toxic BloomBackground

    A dynamic, organic shader effect featuring layered fluid-like formations with distinct color zones. The composition shows a central blue region (#0d778f) with bright lime-green highlights (#99fa2a) creating luminous accents along the edges and surface details. Dark green and purple-brown tones (#143620, #362238) form the outer boundaries and create depth through swirling patterns. The effect demonstrates significant blur and softness, particularly radiating from the center outward, creating a hazy, atmospheric quality. The blob-like formations have irregular, organic edges with pronounced deformation and highlight effects that suggest a 3D volumetric quality. The overall mood is ethereal and fluid, with a sense of movement and transformation. The color transitions are smooth and gradient-like, blending between cool blues and vibrant yellows in the center, while warmer earth tones anchor the periphery. The progressive blur effect creates depth layering, making the composition feel dimensional despite being a 2D shader. The flow field distortion adds subtle wave-like ripples throughout, enhancing the sense of liquid motion and organic growth.