디자인 아틀라스✦시각 효과
글래스모피즘, 리퀴드 글래스, 그레인, 글로우 — 화면의 질감을 만드는 CSS·SVG 효과. — 62개 항목
보더 빔Border beam
테두리 전체가 아니라 짧은 빛줄기 하나가 카드 테두리를 따라 계속 도는 효과.
스포트라이트 카드Spotlight card
커서를 따라다니는 둥근 빛이 카드 표면의 격자 텍스처를 비추는 효과. 카드가 살아있다는 느낌을 줍니다.
유성Meteors
대각선으로 빠르게 지나가는 꼬리 달린 빛줄기 여러 개가 무작위 위치·간격으로 반복해서 떨어지는 배경 효과.
레트로 그리드Retro grid
원근감 있게 기울어진 격자 바닥이 화면 안쪽으로 끝없이 흘러가는 신스웨이브풍 배경.
도트 패턴Dot pattern
작은 점들을 격자로 반복한 배경. 가장자리로 갈수록 옅어지도록 radial-gradient 마스크를 씌워 자연스럽게 흐려지게 만듭니다.
스파클Sparkles
텍스트나 요소 주변에 작은 별 모양이 무작위 위치·타이밍으로 반짝였다 사라지는 장식 효과.
오로라 텍스트Aurora text
청록·보라·핑크가 극광처럼 천천히 흐르고 섞이는 그라데이션을 글자 모양 안에 채우는 기법. 뒤로는 같은 색의 은은한 발광이 함께 번집니다.
애니메이티드 빔Animated beam
두 노드를 잇는 연결선 위로 밝은 점이 흐르듯 이동해서 "데이터가 오가고 있다"는 인상을 주는 다이어그램 장식.
시머 버튼Shimmer button
천천히 도는 그라데이션 테두리 위로 밝은 빛줄기가 반복해서 스쳐 지나가는 CTA 버튼 장식.
궤도 원Orbiting circles
중심 노드 주위를 작은 원 여러 개가 서로 다른 반지름·속도로 도는 장식. 통합 로고·아이콘을 흩어 놓을 때 씁니다.
리플 배경Ripple background
중심에서 원이 점점 커지며 옅어지는 잔물결이 시차를 두고 계속 퍼져 나가는 배경 효과.
텍스트 시머Text shimmer
무채색 글자 위로 밝은 빛 한 줄이 반복해서 스쳐 지나가며 반짝이는 효과. 스켈레톤 로딩의 시머를 텍스트 자체에 적용한 버전입니다.
노이즈 그라데이션 보더Noise gradient border
색이 흐르는 그라데이션 테두리에 미세한 노이즈 질감을 더해, 매끈한 디지털 느낌 대신 인쇄물·필름 같은 거친 표면을 냅니다.
모핑 블롭Morphing blob
하나의 도형이 물방울처럼 꿀렁이며 계속 다른 유기적인 모양으로 부드럽게 바뀌는 효과.
라이트 레이Light rays
한 점에서 뻗어 나오는 빛줄기가 서서히 회전하는 배경 효과. 안개 속에 비치는 햇살(갓레이)을 흉내 냅니다.
도트 지구본Globe dots
위도·경도 격자를 따라 점을 구 표면에 배치하고 천천히 돌려 지구본처럼 보이게 만드는 기법.
CSS filter() 함수CSS filter() functions
blur·brightness·contrast·grayscale·hue-rotate·invert·sepia·saturate — 같은 그림 위에 하나씩 돌려가며 눈으로 비교하는 filter 함수 사전.
backdrop-filter 함수backdrop-filter functions
filter 와 같은 함수 목록(blur·brightness·grayscale…)을 요소 "자신"이 아니라 "뒤에 비치는 배경"에 적용하는 속성.
perspective
3D 변환을 보는 "카메라와 화면 사이 거리". 작을수록 소실점이 가까워 과장되고, 클수록 평평하고 은은해집니다.
backface-visibility
3D로 회전한 요소가 등을 돌렸을 때, 뒷면을 거울처럼 뒤집어 보여줄지(visible, 기본값) 아예 지울지(hidden) 정하는 속성.
transform-origin
rotate·scale 같은 transform 함수가 "어느 점을 기준으로" 적용될지 정하는 속성. 기본값은 요소 정중앙(50% 50%)입니다.
3D 변환 큐브3D transform cube
면 6개를 translateZ 와 rotate 조합으로 세워 만든 진짜 3D 정육면체. perspective + transform-style: preserve-3d 조합의 정석 예제.
SVG 난기류 변위SVG turbulence displacement
feTurbulence 로 만든 노이즈를 feDisplacementMap 이 픽셀을 밀어내는 지도로 써서, 이미지 파일 없이 물결·일렁임을 만드는 SVG 필터 조합.
SVG 라이팅 필터SVG lighting filters
알파 채널을 높낮이 지도로 삼아 가상의 빛을 비추는 필터. feDiffuseLighting 은 무광 음영, feSpecularLighting 은 광택 하이라이트를 만들어 엠보싱 효과를 냅니다.
SVG 모폴로지SVG morphology
알파 채널을 부풀리거나(dilate) 깎아내는(erode) 필터. 팽창은 획을 굵게 뭉치고, 침식은 얇은 획을 갈라지게 만듭니다.
difference 블렌드 커서mix-blend-mode: difference cursor
mix-blend-mode: difference 를 건 흰색 점을 배경 위에 올리면, 무슨 색 위에 있든 항상 또렷하게 반전돼 보이는 커서를 만들 수 있습니다.
drop-shadow vs box-shadow
box-shadow 는 요소의 (둥근) 사각 박스 모양으로 그림자를 그리고, filter: drop-shadow() 는 실제 보이는 픽셀(알파 채널)의 윤곽을 그대로 따라갑니다.
이너 섀도우Inner shadow
box-shadow 앞에 inset 키워드 하나만 붙이면 그림자가 박스 밖이 아니라 안쪽으로 향해, 표면이 눌리거나 파인 것처럼 보입니다.
레이어드 텍스트 섀도우Layered text-shadow
같은 색·블러 없는 text-shadow 를 1px씩 늘려가며 여러 겹 쌓으면, 글자가 옆으로 눌린 두께를 가진 것처럼 보이는 압출(extrude) 효과가 됩니다.
박스 리플렉트Box reflect
-webkit-box-reflect 한 줄이면 요소의 반사상을 자동으로 그려주지만 WebKit/Blink 전용입니다. 표준 대안은 요소를 복제해 scaleY(-1) + mask-image 로 직접 만드는 것.
outline-offset 응용outline-offset effects
outline 은 border 와 달리 박스 모델에 안 잡혀 레이아웃을 밀지 않습니다. outline-offset 으로 그 선을 테두리 안팎 어디로든 띄울 수 있습니다.
clip-path 도형 모핑clip-path shape morphing
circle()·ellipse()·polygon()·inset() 네 가지 기본 도형 함수로 요소를 자르는 clip-path. 최신 브라우저는 서로 다른 함수끼리도 부드럽게 전환(모핑)합니다.
메시 그라데이션Mesh gradient
여러 색상 점을 격자로 겹쳐 부드럽게 섞이는 다색 그라데이션. Stripe, Linear 같은 브랜드가 즐겨 씁니다.
스페큘러 하이라이트Specular highlight
광택 있는 표면에 빛이 반사되어 생기는 밝은 점. 유리·금속 재질감을 표현할 때 핵심 요소입니다.
네온 글로우Neon glow
흐림 반경이 다른 그림자를 여러 겹 쌓아 네온사인처럼 빛나 보이게 하는 기법.
그라데이션 텍스트Gradient text
background-clip: text 로 글자 모양 안에만 그라데이션을 채우는 기법. 제목·로고에 흔히 씁니다.
듀오톤Duotone
사진을 흑백으로 뭉갠 뒤 어두운 영역과 밝은 영역을 서로 다른 두 색으로 물들이는 기법. Spotify 커버아트에서 자주 봅니다.
블렌드 모드Blend mode
겹친 두 레이어의 색을 곱하기·스크린·오버레이 같은 공식으로 합성하는 CSS 속성.
클립 패스 리빌Clip-path reveal
clip-path 도형을 애니메이션해서 이미지·텍스트가 도려내지듯 드러나게 하는 전환 기법.
마스크 페이드Mask fade
mask-image 에 그라데이션을 넣어 요소의 가장자리를 투명하게 지우는 기법. 스크롤 리스트의 "더 있음" 신호로 흔히 씁니다.
코닉 그라데이션Conic gradient
중심에서 각도를 따라 색이 바뀌는 그라데이션. 색상환·로딩 스피너·진행률 링에 씁니다.
홀로그래픽Holographic
보는 각도에 따라 무지개색이 흐르듯 바뀌는 금속/포일 재질 효과. 트레이딩 카드의 "홀로" 버전에서 유래했습니다.
색수차Chromatic aberration
렌즈가 색마다 빛을 다르게 굴절시켜 가장자리에 빨강·파랑이 번져 보이는 광학 현상. 지금은 레트로·글리치 연출로 일부러 씁니다.
글리치Glitch
화면이 순간적으로 깨진 것처럼 텍스트나 이미지 조각이 어긋나고 색이 갈라지는 연출.
하프톤Halftone
인쇄에서 농도를 크고 작은 점의 밀도로 표현하던 방식을 흉내 낸 도트 패턴. 팝아트·인쇄물 느낌을 줍니다.
스캔라인Scanlines
브라운관(CRT) 모니터의 가로줄을 재현한 반복 줄무늬 오버레이. 레트로 게임·VHS 무드에 씁니다.
구이 이펙트Gooey effect
서로 가까워진 도형이 끈적하게 이어 붙듯 하나로 합쳐지는 효과. 플로팅 메뉴 버튼이 열리며 방울처럼 뭉치는 연출에 씁니다.
그라데이션 보더Gradient border
테두리 선 자체에 그라데이션을 넣는 기법. border-color 는 단색만 가능해 배경 트릭이 필요합니다.
샤인 스윕Shine sweep
밝은 빛줄기가 표면을 대각선으로 한 번 훑고 지나가는 광택 효과. 버튼·카드에 은은한 생동감을 줄 때 씁니다.
비네트Vignette
이미지·화면의 가장자리를 어둡게 만들어 시선을 중앙으로 모으는 기법. 카메라 렌즈의 광량 감쇠 현상에서 유래했습니다.
디더링Dithering
색이 부족한 환경에서 점의 패턴으로 색을 섞어 보이게 해 계단 현상(밴딩)을 감추는 기법. 옛 게임기 그래픽 특유의 질감으로도 쓰입니다.
텍스트 스트로크Text stroke
글자를 채우지 않고 윤곽선만 그리거나, 채우기와 윤곽선을 함께 쓰는 기법.
롱 섀도Long shadow
45도 방향으로 길게 뻗어나가는 그림자를 아이콘·글자에 다는 플랫 디자인 트렌드. 2013년 전후 유행했습니다.
익스트루드 텍스트Extruded text
글자 바로 아래에 두께만큼 그림자를 촘촘히 쌓아, 마치 입체 블록을 깎아 만든 것처럼 보이게 하는 기법.
보케Bokeh
카메라가 초점을 벗어난 빛 점을 동그랗고 부드러운 원반으로 담아내는 현상. 배경을 흐릿하게 반짝이는 조명 장식으로 흉내 냅니다.
픽셀화Pixelate
이미지를 아주 낮은 해상도로 줄였다가 다시 확대해, 네모난 색 블록만 남기는 모자이크 효과.
레터프레스(음각) 텍스트Letterpress text
글자가 표면에 살짝 눌려 새겨진 것처럼 보이게 하는 아주 옅은 이중 그림자 기법. 초기 iOS·macOS 텍스트에서 흔히 봤습니다.
리퀴드 글래스Liquid Glass
뒤 배경을 흐리기만 하는 게 아니라 렌즈처럼 굴절시키고, 가장자리에 빛이 맺히는 유리 재질. 2025년 Apple이 iOS 26에 도입했습니다.
글래스모피즘Glassmorphism
반투명한 판 뒤로 배경이 뿌옇게 비치는 "간유리" 스타일. backdrop-filter: blur()가 핵심입니다.
뉴모피즘Neumorphism
배경과 같은 색의 요소에 밝은 그림자와 어두운 그림자를 동시에 줘서, 표면이 튀어나오거나 눌린 것처럼 보이게 하는 스타일.
필름 그레인Film grain
매끈한 그라데이션 위에 미세한 노이즈를 얹어 아날로그 필름 같은 질감을 주는 기법. 그라데이션의 계단(밴딩)도 감춰줍니다.
오로라 그라데이션Aurora gradient
크게 흐린 색 덩어리 여러 개가 천천히 움직이며 섞이는 배경. 랜딩 페이지 히어로에서 자주 봅니다.