Design Atlas✦Visual effects
Glassmorphism, liquid glass, grain, glow — CSS and SVG effects that give a surface its texture. — 62 entries
Border beam보더 빔
A short streak of light that continuously travels around a card's border, instead of the whole edge glowing at once.
Spotlight card스포트라이트 카드
A round glow that follows the cursor and lights up a faint grid texture on a card's surface, making a flat card feel alive.
Meteors유성
Several tailed streaks of light shooting diagonally across the background at random positions and intervals, on a loop.
Retro grid레트로 그리드
A perspective-tilted grid floor that scrolls endlessly into the distance — the synthwave-poster background.
Dot pattern도트 패턴
A grid of small repeated dots, faded toward the edges with a radial-gradient mask so it dissolves naturally instead of cutting off.
Sparkles스파클
Small star shapes that pop in and fade out at random positions and timing around a piece of text or an element.
Aurora text오로라 텍스트
A slow-flowing, blending teal-purple-pink gradient — an aurora palette — filled inside glyph shapes, with a soft glow of the same colours bleeding behind.
Animated beam애니메이티드 빔
A bright pulse that travels along a line connecting two nodes, giving a diagram the sense that data is actively flowing between them.
Shimmer button시머 버튼
A CTA button with a slowly rotating gradient ring and a bright band of light sweeping across it on a loop.
Orbiting circles궤도 원
Several small circles orbiting a central node at different radii and speeds — a place to scatter integration logos or icons.
Ripple background리플 배경
Rings that grow larger and fade from a central point, staggered so new ones keep spreading outward on a loop.
Text shimmer텍스트 시머
A single bright band that repeatedly sweeps across otherwise plain-coloured text — the skeleton-loading shimmer, applied to the letters themselves.
Noise gradient border노이즈 그라데이션 보더
A flowing gradient border with fine noise layered in, trading a slick digital look for the rougher texture of print or film.
Morphing blob모핑 블롭
A single shape that keeps softly warping between different organic forms, like a drop of liquid never quite settling.
Light rays라이트 레이
A background where beams of light fan out from a single point and rotate slowly — the volumetric "god rays" look of sunlight through haze.
Globe dots도트 지구본
Dots placed along a latitude/longitude grid on a sphere and slowly rotated so it reads as a spinning globe.
CSS filter() functionsCSS filter() 함수
blur, brightness, contrast, grayscale, hue-rotate, invert, sepia, saturate — cycling each filter() function over the same image so you can compare them by eye.
backdrop-filter functionsbackdrop-filter 함수
The same function list as filter — blur, brightness, grayscale… — applied not to the element itself but to whatever is visible behind it.
perspective
The viewing distance between the imaginary camera and the z=0 plane for 3D transforms. Smaller means an exaggerated, close vanishing point; larger looks flat and subtle.
backface-visibility
When a 3D-rotated element turns away from the viewer, this decides whether its reverse side still renders mirrored (visible, the default) or disappears entirely (hidden).
transform-origin
Sets the point that rotate/scale (and other transform functions) pivot around. The default is the element's own centre, 50% 50%.
3D transform cube3D 변환 큐브
A real 3D cube built from six flat faces positioned with translateZ and rotate. The textbook demonstration of perspective plus transform-style: preserve-3d.
SVG turbulence displacementSVG 난기류 변위
Feeding feTurbulence noise into feDisplacementMap as a push-map — the SVG filter combo that fakes water ripples or a wobble effect with no image assets.
SVG lighting filtersSVG 라이팅 필터
Treats an alpha channel as a height map and shines a virtual light on it. feDiffuseLighting gives matte shading, feSpecularLighting gives a glossy highlight — together they emboss a flat shape.
SVG morphologySVG 모폴로지
Grows (dilate) or shrinks (erode) an alpha shape. Dilation thickens strokes until they merge; erosion thins them until thin strokes can break apart.
mix-blend-mode: difference cursordifference 블렌드 커서
Put mix-blend-mode: difference on a white dot and it inverts whatever colour sits beneath it — a cursor that stays legible over any background.
drop-shadow vs box-shadow
box-shadow paints a shadow shaped like the element's (rounded) box. filter: drop-shadow() traces the actual visible pixels — the alpha silhouette — instead.
Inner shadow이너 섀도우
Add the inset keyword to box-shadow and the shadow paints inside the border edge instead of outside — the surface reads as pressed in or recessed.
Layered text-shadow레이어드 텍스트 섀도우
Stack several same-colour, zero-blur text-shadows at 1px-increasing offsets and the letters read as if they have physical thickness — an extruded, 3D look.
Box reflect박스 리플렉트
-webkit-box-reflect draws a mirrored copy of an element in one line, but it's WebKit/Blink-only. The standards-safe fallback duplicates the element and fades it with scaleY(-1) plus mask-image.
outline-offset effectsoutline-offset 응용
Unlike border, outline sits outside the box model and never pushes layout. outline-offset lets you float that line inward or outward from the border edge at will.
clip-path shape morphingclip-path 도형 모핑
clip-path's four basic shape functions — circle(), ellipse(), polygon(), inset() — cut an element down to that region, and modern browsers can smoothly morph between different ones.
Mesh gradient메시 그라데이션
Several colour points layered across a grid so they blend into one smooth field — the multi-hue background style popularised by Stripe and Linear.
Specular highlight스페큘러 하이라이트
The bright spot where light reflects off a glossy surface — the key ingredient for selling glass or metal materials.
Neon glow네온 글로우
Stacking several shadows with different blur radii so text or shapes glow like a neon sign.
Gradient text그라데이션 텍스트
Filling a gradient only inside glyph shapes with background-clip: text — a common trick for headings and logos.
Duotone듀오톤
Collapsing a photo to greyscale, then tinting shadows toward one colour and highlights toward another — the look Spotify made famous on cover art.
Blend mode블렌드 모드
A CSS property that composites two overlapping layers using formulas like multiply, screen, or overlay.
Clip-path reveal클립 패스 리빌
Animating a clip-path shape so an image or block of text appears to be cut open, revealing what’s underneath.
Mask fade마스크 페이드
Using a gradient as mask-image to erase an element’s edges into transparency — the classic "there’s more to scroll" signal.
Conic gradient코닉 그라데이션
A gradient that changes colour by angle around a centre point — used for colour wheels, spinners, and progress rings.
Holographic홀로그래픽
A foil-like surface whose rainbow colours seem to shift with the viewing angle — the look of a "holo" trading card.
Chromatic aberration색수차
An optical flaw where a lens bends different wavelengths by different amounts, fringing edges with red and blue. Now used intentionally for a retro or glitchy look.
Glitch글리치
Text or image slices momentarily jump out of alignment and colours split, as if the screen briefly corrupted.
Halftone하프톤
A dot pattern that mimics how print reproduces tone with varying dot size — the pop-art, newsprint look.
Scanlines스캔라인
Repeating horizontal stripes that recreate the visible scan lines of old CRT monitors — a staple of retro-game and VHS moods.
Gooey effect구이 이펙트
Shapes that appear to melt together into one blob as they get close — used for floating menu buttons whose items "ooze" out and merge.
Gradient border그라데이션 보더
Putting a gradient on the border line itself. border-color only accepts a solid colour, so it takes a background trick.
Shine sweep샤인 스윕
A bright diagonal band of light that sweeps once across a surface — a small dose of life for buttons and cards.
Vignette비네트
Darkening an image’s edges to pull the eye toward the centre — originally a lens artefact where light falls off toward the frame’s corners.
Dithering디더링
Scattering dots in a pattern to visually blend limited colours, hiding banding — also prized today for the gritty look of old-console graphics.
Text stroke텍스트 스트로크
Drawing only a glyph’s outline instead of filling it — or combining a fill with a stroke.
Long shadow롱 섀도
A shadow stretching at a 45-degree angle far behind an icon or letter — a flat-design trend that peaked around 2013.
Extruded text익스트루드 텍스트
Stacking a tight trail of shadow layers straight behind text so the letters read as solid, three-dimensional blocks with real thickness.
Bokeh보케
The soft, round discs a camera renders for points of light that fall outside the focal plane — recreated on screen as a dreamy, twinkling light backdrop.
Pixelate픽셀화
Shrinking an image to a tiny resolution and scaling it back up, leaving only blocky squares of colour — the classic mosaic/censor effect.
Letterpress text레터프레스(음각) 텍스트
A very subtle two-shadow trick that makes text look gently pressed into the surface — a look common in early iOS and macOS UI text.
Liquid Glass리퀴드 글래스
A glass material that refracts the background like a lens and catches light on its edges — not just a blur. Introduced by Apple in iOS 26 (2025).
Glassmorphism글래스모피즘
The frosted-glass look: a translucent panel with a blurred background showing through. backdrop-filter: blur() does the work.
Neumorphism뉴모피즘
Same-colour elements with a light and a dark shadow at once, so they look extruded from or pressed into the surface.
Film grain필름 그레인
Fine noise laid over a smooth gradient for an analogue, filmic texture. It also hides gradient banding.
Aurora gradient오로라 그라데이션
Several heavily blurred colour blobs drifting and mixing slowly. A common landing-page hero background.