Shader Atlas
한국어

199 shader components,
15 categories.

If effect names and parameters feel unfamiliar, start with the demo and adjust a value. A bilingual guide to WebGPU shader backgrounds and effects, with examples and code.

◐Gradients & backgrounds

Linear, radial and mesh gradients — background layers that fill the canvas on their own. Most shader backgrounds start here.

View all (10) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Linear Gradient선형 그라디언트

Fill a canvas with a smooth color transition along a direction.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Radial Gradient원형 그라디언트

A gradient that spreads outward from a center point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Conic Gradient원뿔형 그라디언트

Colors sweep in a full circle around a center point, like a color wheel.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Diamond Gradient다이아몬드 그라디언트

A gradient radiates from a center point in a diamond shape.

Browse by field

Generate

Material & transform

Look

Interact & compose

▒Noise

Perlin, simplex, Worley noise and Voronoi — mathematical textures that produce natural-looking irregularity.

View all (13) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Perlin Noise펄린 노이즈

A smooth, cloudlike color field that gently changes over time.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Simplex Noise심플렉스 노이즈

Organic noise with smoothly moving regions of color.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Worley Noise워리 노이즈

A cellular field that maps distance from scattered points to color, with selectable cell and edge patterns.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Fractal Noise프랙털 노이즈

A layered noise texture whose pattern evolves over time, with finer detail added at successive scales.

▦Patterns & grids

Checkerboards, stripes, hex grids and Truchet tiles — patterns that repeat on a rule.

View all (15) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Checkerboard체커보드

A board of square tiles that alternate between two colors.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stripes스트라이프

Two alternating stripe colors form a repeating pattern that can move.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Grid그리드

Evenly spaced lines cross to divide the canvas into a regular grid.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Dot Grid도트 그리드

A regular field of dots that can twinkle or drift sideways.

✺Light & phenomena

Aurora, god rays, ripples and floating particles — layers that imitate light and natural phenomena.

View all (12) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Aurora오로라

Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Beam광선

A beam of light from one point to another.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Godrays갓 레이

Volumetric light rays emanating from a point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Prism프리즘 광선

A beam of light that fans out and splits into a slowly-rotating rainbow past a controllable point. Transparent background — composite over a dark layer.

◯Shapes

Circles, stars and hearts drawn with signed distance functions (SDF) — also used as masks and as the shape for material effects.

View all (16) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Circle원

Draw a filled circle with adjustable size and edge softness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ellipse타원

Create an oval by adjusting its horizontal and vertical radii independently.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Rounded Rect둥근 사각형

A rectangle with adjustable width, height, and corner rounding.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Polygon정다각형

Make a regular polygon from a triangle to a nearly circular form, with adjustable sides and corner rounding.

▣Media input

Bring images, video, webcam and text into the shader as layers — the things you apply effects to.

View all (5) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Image Texture이미지 텍스처

Display an image with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Video Texture비디오 텍스처

Display a video with customizable playback and object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Webcam Texture웹캠 텍스처

Display a live webcam feed with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Text텍스트

Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture.

◆Materials

Glass, chrome, liquid metal and holographic finishes applied to a shape — they compute refraction and reflection.

View all (23) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glass유리 렌즈

A glass lens that refracts content beneath a custom shape and adds a soft luminous edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Frost성에 낀 얼음

Thickness-driven frozen ice with fine frost crystals creeping inward from the edges.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Chrome크롬 금속

A mirror-chrome finish with studio reflections and a polished bevel on a custom shape.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Liquid Metal액체 금속

Flowing chrome reflections sweep across animated folds in a molten metal surface.

≈Distortions

Twirl, bulge, kaleidoscope and polar coordinates — effects that move where the pixels beneath them land.

View all (22) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Twirl소용돌이 왜곡

The image curls around a point, creating a swirling vortex.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Bulge볼록·오목 왜곡

Content swells outward or pinches inward around a chosen point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Bend곡면 휨

The frame curves toward or away from the viewer, changing the apparent depth at its edges.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stretch방향성 늘이기

Content pulls and elongates away from a center in a chosen direction.

◌Blurs

Gaussian, zoom, angular, bokeh and tilt-shift blur — the direction and shape of the blur change the feel entirely.

View all (9) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blur가우시안 블러

A uniform Gaussian blur softens edges and fine detail across the image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Linear Blur방향성 블러

A directional blur stretches image detail along a chosen angle.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Zoom Blur줌 블러

A zoom blur pulls image details toward or away from a chosen center.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Angular Blur회전형 블러

An angular blur smears image detail around a chosen center point.

⇥Transitions

Wipes, irises, dissolves and page peels — effects that move from one picture to the next.

View all (13) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Linear Wipe선형 와이프

A soft straight edge moves across the input and gradually wipes it away.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Radial Wipe방사형 와이프

A clock-hand sweep rotates around a center and removes the input.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Iris Wipe아이리스 와이프

An expanding circular iris reveals or removes the input around a chosen center.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Diamond Wipe다이아몬드 와이프

Growing diamond cells form a lattice that wipes the image away.

◑Color adjustments

Brightness, contrast, saturation, hue, duotone and film looks — a photo editor’s adjustment menu as live layers.

View all (14) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Brightness Contrast밝기·대비

Brightness moves the image lighter or darker, while contrast changes the separation between tones.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Exposure노출

Exposure scales image values around black, so brighter highlights can extend beyond white.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Saturation채도

Saturation controls how vivid or muted the image colors look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Vibrance바이브런스

Vibrance selectively increases saturation while protecting skin tones.

▚Stylize & media textures

CRT, VHS, halftone, dither, ASCII, watercolor and tracking overlays — styles that imitate the texture of a medium or a tool.

View all (18) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ascii아스키 아트

Maps light and dark areas to character density, turning an image into ASCII art.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

CRT ScreenCRT 화면

Adds RGB phosphor stripes, horizontal scanlines, and darkened corners for a CRT monitor look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

VHSVHS 테이프

Adds horizontal noise, color bleed, and tape wobble for a worn VHS playback look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Compression Artifacts압축 아티팩트

Recreates JPEG block edges, ringing, and color bleed to give an image a visibly compressed look.

◎Light & lens

Chromatic aberration, lens distortion, light leaks, glow and vignetting — traces a camera lens and light leave behind.

View all (12) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Chromatic Aberration색수차

Separates the red, green and blue channels so edges show a prism-like color split.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Lens Distortion렌즈 왜곡

Warps the image like a barrel or pincushion lens while splitting it into shifting color layers.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Light Leak라이트 릭

Adds warm, overexposed light that appears to leak into the frame from a film edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glow글로우

Softens bright areas into a surrounding glow with adjustable intensity.

⌖Interactive

Cursor trails, ink and smoke fluids, boids — simulations that react to the pointer or move on their own.

View all (16) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Cursor Trail커서 트레일

A colored stroke briefly lingers along the pointer’s path.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Cursor Ripples커서 잔물결

Ripples spread from the pointer and warp the image beneath them.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Liquify리퀴파이

The pointer stretches and releases the image beneath it like soft fabric.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Grid Distortion그리드 왜곡

The grid bends around the pointer and locally shifts the image beneath it.

⧉Compose

Layer order, blend modes, masks, dynamic props and groups — the rules for stacking components into one effect.

View all (6) →

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Group그룹

A container that groups shader layers and lays them out together.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Layer stack레이어 순서

Layers draw from bottom to top, and an effect applies to layers drawn before it.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blend modes블렌드 모드

A blend mode defines how a layer's colors combine with the layers beneath it.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Masking마스킹

A mask uses another layer's alpha or brightness to decide where an image remains visible.

Open as page ↗