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
- Collapsing Grid 9Background
A gradient-based shader effect displaying a smooth tonal transition from black at the bottom to white at the top, rendered through a pixelated circular dot pattern. The composition features approximately 16x8 grid of rounded circles with varying opacity levels, creating a halftone-like appearance. The circles transition from solid black on the left and bottom edges, through medium gray tones in the middle sections, to pure white in the upper-right quadrant. The pixelation scale of 18 with 0.03 gap spacing creates distinct circular cells with rounded corners (roundness mapped from 0.13 to 1.0). The overall effect produces a smooth luminosity gradient despite the discrete pixel structure, with a dark background (#121212) providing contrast. The swirl component beneath adds subtle color blending between white and black in oklab color space, creating smooth tonal transitions. The effect has a technical, data-visualization quality with precise geometric spacing and mathematical gradient progression.

- Collapsing Grid 8Background
A pixelated gradient shader effect displaying a smooth color transition across a 16x10 grid of rounded square cells with subtle gaps between them. The composition creates a diagonal gradient flowing from deep blue and purple tones in the upper-left corner, transitioning through magenta and pink in the center, and fading to cream and off-white in the lower-right corner. The pixelation effect uses rounded corners with variable roundness mapped to an invisible sine wave and chroma flow layer, creating organic softness despite the grid structure. The dark background (#1b1029) provides strong contrast, making the gradient cells appear to float. The swirl shader underneath generates subtle color interpolation between white (#ffffff) and deep blue (#271ec7) using OKLCH color space, creating smooth hue transitions. The overall effect combines geometric precision with fluid color blending, producing a modern, gradient-based aesthetic with a calm, meditative atmosphere. The spacing and roundness of cells increase subtly from left to right, enhancing the sense of depth and movement.

- Collapsing Grid 7Background
A gradient shader effect displaying a grid of rounded square pixels arranged in 16 columns and 10 rows. The image shows a smooth color transition from light periwinkle blue in the upper left corner to deep dark purple in the lower right corner. Each pixel has a slight rounded corner with small black gaps between them, creating a distinct grid pattern. The gradient flows diagonally from top-left to bottom-right, with the lightest values (#7974c2 range) at the top transitioning through medium purples in the middle rows to the darkest values (#2d174c) at the bottom-right. The overall effect suggests a swirl or color flow pattern mapped across the pixelated surface, with the roundness of each pixel varying based on an underlying alpha channel map. The atmosphere is cool and digital, with a subtle depth created by the color gradient progression.

- Collapsing GridBackground
A gradient-based shader effect displaying a smooth color transition across a pixelated grid structure. The image shows a diagonal gradient flowing from bright yellow (#ffe424) in the upper-left and lower-right corners to vibrant magenta (#ff47ff) in the center-right and lower-left areas. The pixelation effect creates rounded square cells with varying sizes, with a gap of 0.03 between them. The roundness of the pixels is dynamically mapped to an alpha channel, creating organic variation in cell corner radius from sharp (0.13) to fully rounded (1.0). A swirl pattern with dual-color interpolation (magenta to yellow-green) is blended at 50% opacity, creating a subtle turbulent distortion across the grid. The overall effect has a smooth, flowing quality despite the discrete pixelated structure, with the color space using oklab for perceptually uniform transitions. The atmosphere is vibrant and energetic, with warm yellows contrasting against cool magentas, creating visual depth and movement across the composition.

- Collapsing Grid 2Background
A gradient-based shader effect displaying a smooth color transition across a pixelated grid layout. The image shows 16 columns and 10 rows of rounded square tiles with dark navy blue (#160091) as the base background. The primary visual effect is a diagonal gradient flowing from the top-left to bottom-right, transitioning from bright lime green (#0fff5b) in the upper-left quadrant through cyan and teal tones in the middle sections, to deep blue (#0d47ba) in the lower-right quadrant. Each tile has subtle rounded corners with a gap of approximately 3% between them, creating a clean, modular appearance. The gradient appears to be generated by a Swirl component with a blend value of 50, creating smooth color interpolation across the pixelated surface. The overall effect suggests a heat map or data visualization with organic color flow, enhanced by the pixelation effect that maintains crisp tile boundaries while allowing the underlying gradient to create a sense of depth and directional movement. The lighting is even with no apparent shadows or highlights, maintaining a flat, digital aesthetic.

- Collapsing Grid 6Background
A gradient mesh composed of rounded square tiles arranged in a 16x10 grid pattern. The shader creates a smooth color transition from deep purple (#160091) in the top-left corner to soft pink (#f285ba) in the bottom-right corner, with intermediate purple and mauve tones throughout. Each tile has subtle rounded corners with a small dark border/gap (0.03 scale) separating them, creating a pixelated mosaic effect with scale factor of 18. The roundness of each tile varies dynamically, controlled by an invisible sine wave and chroma flow effect mapped to the alpha channel, creating organic variation in corner radius across the grid. The color interpolation uses the OKLAB color space for perceptually smooth transitions. The overall effect produces a soft, gradient-based pixelated appearance with a gentle, modern aesthetic. The tiles transition smoothly from highly saturated deep purple on the left to desaturated pale pink on the right, with the gradient flowing diagonally across the composition. The effect has a calm, minimalist mood with smooth color blending and geometric precision.

- Collapsing Grid 5Background
A gradient mesh composed of rounded square tiles arranged in a 16x10 grid pattern. The tiles transition smoothly from purple (#8145ff) on the left side to cyan and light-blue (#0273ef) on the right side, creating a horizontal color gradient. Each tile has subtle dark borders creating separation and depth. The top-left corner features the most saturated purple tones, while the bottom-right corner displays the most vibrant cyan-blue hues. The overall effect is a smooth, pixelated color transition with rounded corners on each tile element. The base layer appears to be a deep dark-blue (#160091) background. The pixelation creates a modern, digital aesthetic with a soft, glowing quality due to the rounded tile edges and the blend mode interactions between the swirl effect and the pixelate layer.

- Collapsing Grid 4Background
A gradient shader effect displaying a 16x12 grid of rounded square tiles with smooth color transitions. The composition features a diagonal gradient flowing from tan/beige in the upper-left corner to vibrant magenta/purple in the lower-right corner. The tiles have a 0.03 unit gap between them with variable roundness that increases toward the right side of the composition. The underlying swirl effect creates a smooth color interpolation between tan (#d6ac82) and bright magenta (#b90cd5) using oklab color space, producing natural-looking intermediate hues including mauve, dusty rose, and orchid tones. A pale yellow background (#fff6a8) provides subtle contrast. The effect demonstrates a radial color mapping where the roundness of each tile increases based on an invisible alpha channel from a hidden group component, creating a subtle three-dimensional appearance. The overall mood is vibrant and modern with a smooth, organic color transition despite the geometric grid structure.

- Collapsing Grid 3Background
A gradient mesh of rounded square tiles arranged in a 18x10 grid pattern. The tiles transition smoothly from light purple (#e2a8ff) in the upper left to deep magenta/pink (#ce57bd) in the lower right, creating a diagonal color gradient. Each tile has slightly rounded corners with a subtle gap (0.03 units) between them, creating a clean, organized appearance. The roundness of the tiles varies based on an underlying swirl effect, with some tiles appearing more circular while others maintain sharper corners. The swirl effect blends two colors (magenta #ce57bd and blue-purple #b073ff) with a detail level of 1.3, creating subtle color variations within the pixelated structure. The overall effect is smooth and modern, with no harsh edges or distortion, maintaining a calm, gradient-focused aesthetic. The lighting appears even across the entire composition with no visible shadows or highlights, creating a flat, contemporary design feel.
