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.
9 presets
- City Grid 9Background
A gradient pixelated shader effect transitioning from deep black on the left to vibrant purple and blue on the right. The image displays a smooth horizontal gradient composed of small square pixels that increase in size and intensity from left to right. The left side features nearly invisible dark pixels against the black background (#09060f), creating a subtle dotted pattern. Moving rightward, pixels become progressively larger and more visible, with colors shifting from dark purple through medium purple (#6500ff) to bright white and light blue. The pixelation creates a blocky, digital aesthetic with rounded corners on each pixel element (roundness: 0.2). An underlying plasma effect generates organic, flowing color variations within the pixelated structure, creating a dynamic, animated quality. The overall composition suggests a wave or gradient map influence, with the sine wave component controlling the pixel gap distribution. The effect has a modern, tech-forward aesthetic with a smooth fade from darkness to luminous color, evoking a sense of digital emergence or data visualization.

- City Grid 8Background
A digital pixelated shader effect displaying a dynamic plasma-based animation with a gradient fade pattern. The composition features a dark navy-to-black background (#09060f) with a prominent pixelated grid overlay creating a mosaic appearance. The pixelation scale is set to 74 with rounded corners (0.2 roundness), producing visible square blocks that vary in opacity. The primary visual element is an animated plasma effect with colors transitioning between cyan-blue (#0073b5) and deep purple (#1f0761), creating a swirling, organic energy pattern. The plasma has high intensity (1.8) and contrast (1.6), generating vibrant color variations within the pixelated blocks. A sine wave pattern (invisible but functionally mapped) controls the gap spacing of the pixelation, creating a dynamic modulation effect where pixel density varies across the composition - denser in the upper-left quadrant and progressively sparser toward the lower-right, creating a sense of depth and movement. The overall effect suggests a digital, technological aesthetic with a glowing, energetic quality. The blend mode is set to normal, maintaining the integrity of the underlying colors while the pixelation effect creates a retro-digital or data visualization appearance.

- City Grid 7Background
A dark, atmospheric digital effect featuring a pixelated plasma animation against a near-black background. The composition shows a gradient of purple and magenta pixels concentrated in the upper-right portion of the frame, creating a sense of movement and energy flowing diagonally from top-right toward the lower-left. The pixelation effect creates a blocky, retro-digital aesthetic with varying pixel sizes controlled by a sine wave modulation, resulting in denser clustering in bright areas and sparse distribution in dark areas. The plasma effect underneath generates organic, turbulent patterns with high contrast between the vibrant magenta (#a300b5) and pure black (#000000) colors. The overall mood is cyberpunk and technological, with a sense of dynamic energy and motion. The effect has a soft, glowing quality despite the pixelation, suggesting high intensity and contrast settings. The background solid color (#09060f) is nearly imperceptible, appearing as pure black, allowing the purple-magenta plasma pixels to stand out dramatically. The spatial distribution creates depth, with the densest pixel concentration at the top creating a sense of the effect flowing or dispersing downward.

- City Grid 6Background
A pixelated digital effect displaying an animated plasma pattern with a gradient fade. The left side features dense, bright lime-green pixels (#36b500) arranged in a pixelated grid pattern with a scale of 74 pixels. The pixels gradually transition from solid, tightly-packed squares on the left to increasingly sparse, smaller dots moving toward the right side of the image. The effect creates a sense of dispersal or dissolution. The background is a very dark near-black color (#09060f). The plasma animation underneath generates organic, flowing patterns with high contrast (1.6x) and intensity (1.8x), creating a dynamic, turbulent appearance. The pixelation gap is modulated by an invisible sine wave mapped to the alphaInverted channel, creating the progressive fade effect from dense to sparse pixels. The overall mood is technological, digital, and somewhat ethereal, with a strong sense of motion and energy flowing from left to right. The roundness value of 0.2 gives the pixels slightly softened edges rather than hard squares.

- City Grid 5Background
A dark, atmospheric digital effect featuring a pixelated red plasma pattern that emerges from the right side of the image and gradually disperses toward the left. The background is a very dark near-black color (#09060f). The main visual element is a dynamic pixelated grid pattern composed of red and dark red squares of varying sizes and opacity, creating a wave-like or flowing motion from upper-right to lower-left. The pixelation effect has a scale of 74 with rounded corners (0.2 roundness), giving each pixel a slightly soft appearance. The red plasma underneath generates organic, turbulent patterns with high contrast (1.6) and intensity (1.8), creating a sense of energy and movement. The gap between pixels is modulated by an invisible sine wave mapped to the alphaInverted channel, creating a breathing or pulsing effect where pixels become more or less visible across the composition. The overall mood is technological, energetic, and somewhat ominous, with a strong sense of directional flow from right to left. The effect suggests data visualization, digital corruption, or energy discharge.

- City Grid 4Background
A dark, atmospheric digital effect featuring a pixelated plasma animation against a near-black background. The composition shows purple and magenta pixels arranged in a grid pattern that gradually increases in density and intensity toward the bottom third of the frame, creating a wave-like or rising effect. The pixels vary in brightness and saturation, with the most vibrant purple tones (#8c00ff) concentrated in the lower portion, while the upper two-thirds fade into sparse, dimly lit pixels against the very dark background (#09060f). The pixelation effect has a scale of 74 with rounded corners (0.2 roundness), giving each pixel a slightly softened square appearance. The overall mood is technological and ethereal, with a sense of digital energy or data visualization rising from the bottom. The plasma effect underneath creates organic, flowing color variations within the pixelated structure, with a warp of 0.4 and high contrast (1.6) that makes the purple tones pop against the black areas. The effect appears to be animated, with the sine wave modulation controlling the gap spacing to create a dynamic, pulsing quality.

- City Grid 3Background
A dark, atmospheric shader effect featuring a pixelated plasma animation on a near-black background. The composition shows a gradient of purple and magenta pixels emanating from the left side of the screen, creating a diagonal dispersal pattern that fades into the dark background toward the right. The pixelation effect creates distinct square blocks of varying sizes, with larger pixels on the left transitioning to smaller, more transparent pixels as they spread rightward. The plasma layer beneath generates an organic, flowing pattern with vibrant purple (#8c00ff) and black coloration, creating a sense of energy and movement. The overall effect has a cyberpunk aesthetic with a glowing, ethereal quality. The sine wave modulation controls the pixel gap distribution, creating a smooth falloff from dense to sparse pixelation. The dark purple background (#09060f) provides deep contrast, while the animated plasma generates subtle color variations between pure magenta and black, with high contrast and intensity creating a luminous appearance despite the dark overall tone.

- City Grid 2Background
A dark, atmospheric digital effect featuring a pixelated plasma animation against a near-black background. The composition shows purple and magenta pixels of varying sizes and intensities scattered across the frame, creating a diagonal gradient pattern that flows from the lower-left corner toward the upper-right. The pixelation effect creates a mosaic-like appearance with individual square blocks that vary in opacity and brightness. The plasma underneath generates organic, flowing patterns in bright purple (#8c00ff) and deep black, with a wavy, undulating quality that suggests movement and energy. The pixels appear to have soft, rounded edges with a slight glow effect. The overall mood is technological and ethereal, with a sense of depth created by the varying pixel sizes and opacity levels. The effect uses an inverted alpha channel mapping to control the gap spacing between pixels, creating a dynamic, breathing quality to the pixelation. The background is a very dark purple-black (#09060f), providing maximum contrast for the bright purple elements.

- City GridBackground
A dark, atmospheric digital effect featuring a pixelated gradient that transitions from deep black on the left side to vibrant purple and magenta tones on the right side. The pixelation creates a mosaic-like appearance with square blocks of varying sizes, becoming denser and more prominent toward the right edge. The underlying effect is a plasma animation with organic, flowing patterns in purple (#8c00ff) and black, creating a sense of movement and energy. The pixelation scale of 74 with a gap mapping creates a wave-like distortion pattern that makes the pixels appear to undulate across the composition. The overall mood is technological and ethereal, with high contrast between the dark background and the luminous purple plasma effect. The sine wave mapping influences the pixel gap distribution, creating a gradient of pixelation intensity from left to right. The effect has a smooth, rounded pixel appearance due to the 0.2 roundness setting, giving it a slightly softer, less harsh digital aesthetic.
