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.
3 presets
- Nightlight 3Background
A deep, atmospheric gradient shader effect transitioning from nearly black dark purple in the upper left (#120524) to a richer blue-purple tone in the lower right. The composition features a subtle swirling pattern with two primary color bands: a vibrant electric blue-purple (#6057fa) and a deeper indigo (#3d06b8) that blend together using oklch color space, creating smooth chromatic transitions. The swirl effect has fine horizontal detail (fineX: 13) combined with medium vertical smoothness, producing an organic, flowing distortion pattern that moves across the canvas. A delicate film grain texture with 0.04 strength is overlaid throughout, adding subtle noise and texture to break up the smoothness and create visual depth. The overall mood is cosmic and ethereal, with a sense of movement and depth despite the static nature of the image. The blend mode interactions create soft, seamless color transitions without harsh edges. The effect suggests a nebula or aurora-like phenomenon with a professional, polished appearance.

- Nightlight 2Background
A deep, atmospheric gradient shader effect transitioning from vibrant blue-purple tones on the left side to nearly black on the right side. The composition features a swirling, organic distortion pattern created by the Swirl component that blends two colors (#6057fa bright purple-blue and #3d06b8 deep dark blue) using oklch color space blending at 50% intensity. The swirl effect creates fluid, wave-like patterns that flow across the canvas with fine detail variations (fineX: 13, fineY: 50) generating intricate texture throughout. A dark navy base color (#120524) anchors the composition underneath. The overall effect is enhanced by subtle film grain (0.04 strength) that adds a cinematic texture and reduces banding. The masked circle element (currently invisible but structurally present) would normally constrain the swirl effect to a specific region. The lighting is moody and atmospheric, with no harsh edges or defined shapes-purely abstract color and texture manipulation. The blend mode uses normal-oklch for the swirl, preserving color relationships in perceptual color space. The result evokes a cosmic, nebula-like atmosphere with smooth color transitions and organic flowing distortions.

- NightlightBackground
A deep, atmospheric gradient shader effect transitioning from very dark navy/black at the edges to a rich blue-purple center. The composition features a subtle swirl pattern with flowing gradients between vibrant purple (#6057fa) and deep indigo (#3d06b8) that creates organic, wave-like distortions throughout the canvas. The effect has a soft, ethereal quality with smooth color transitions and no harsh edges. A fine film grain texture overlays the entire surface at low opacity (0.04), adding subtle noise and visual texture that enhances the cinematic quality. The overall mood is dark, mysterious, and cosmic, with the swirl effect creating a sense of motion and depth despite the static nature of the image. The color space uses OKLCH for smooth perceptual blending, resulting in natural color transitions. The background solid color (#120524) provides a nearly black foundation that anchors the brighter purple-blue swirl effects above it.
