분위기로 고르는 그라데이션

68가지 큐레이션 그라데이션. HEX를 클릭하면 코드가, CSS 복사 버튼을 누르면 바로 쓸 수 있는 CSS가 복사됩니다.

선셋 드라이브 따뜻함·향수

노을빛 오렌지와 산호색의 만남. 드라이브, 포스터, 식음료 브랜드에 잘 어울립니다.

#FF6B6B #FE8C00
오로라 보레알리스 신비·생동감

하늘빛 청록과 연두의 조합. 테크, 웰니스, 앱 UI 배경에 청량하게 사용하세요.

#00C9FF #92FE9D
봄 벚꽃 로맨틱·봄

연핑크에서 딥로즈로. 웨딩, 뷰티, 봄 시즌 SNS 콘텐츠에 자주 쓰이는 정석 조합입니다.

#FFB7C5 #FF69B4 #C9184A
라벤더 안개 몽환·우아

연보라에서 하늘색으로 흐르는 부드러운 전환. 패션, 뷰티, 명상 앱에 자주 활용됩니다.

#E0C3FC #8EC5FC
딥 오션 깊이·신뢰

밝은 스카이블루에서 심해 네이비로. 금융, IT, 항공 브랜드의 신뢰감 있는 배경으로 탁월합니다.

#1CB5E0 #000851
골든아워 따스함·풍요

황금빛 오렌지와 레몬 옐로우. 프리미엄 식품, 명품, 가을 시즌 디자인에 어울립니다.

#F7971E #FFD200
네온 글로우 화려·파티

하늘·보라·핑크가 이어지는 강렬한 네온 조합. 나이트클럽, 음악, 게임 브랜드에 어울립니다.

#12C2E9 #C471ED #F64F59
민트 프레시 청량·건강

에메랄드에서 민트그린으로. 건강식품, 환경, 피트니스 브랜드에 신선한 느낌을 줍니다.

#0BAB64 #3BB78F
코스믹 퓨전 미래적·독창

마젠타 핑크와 인디고 블루. AI, 크립토, 사이버펑크 무드의 브랜드에 완벽한 조합입니다.

#FF00CC #333399
피치 플로트 달콤·부드러움

크림에서 복숭아빛으로 이어지는 달콤한 그라데이션. 디저트, 스킨케어, 어린이 브랜드에 잘 맞습니다.

#FFECD2 #FCB69F
자정 특급 미니멀·세련

칠흑 같은 어둠 속 인디고의 미묘한 변화. 럭셔리, 테크, 다크 테마 UI에 깊이를 더합니다.

#0F0C29 #302B63 #24243E
라임 에너지 활력·자연

짙은 초록에서 라임으로. 스포츠, 아웃도어, 에코 브랜드의 생동감 있는 배경으로 활용하세요.

#56AB2F #A8E063
로즈 골드 고급·여성스러움

로즈골드의 따뜻한 광택감. 주얼리, 뷰티, 프리미엄 패키지 디자인에 고급스러운 분위기를 줍니다.

#B76E79 #E8A4AD #FFE0E5
폴라 스카이 맑음·자유

투명한 하늘빛에서 코발트로. 항공, 여행, 청정 이미지의 브랜드에 시원하고 넓은 인상을 줍니다.

#89F7FE #66A6FF
포레스트 딥 안정·차분

어두운 틸에서 숲의 초록으로. 명상, 에코, 고급 호텔·리조트 브랜드에 깊은 안정감을 줍니다.

#134E5E #71B280
망고 탱고 활기·에너지

망고빛 오렌지에서 선명한 레몬으로. 음식·음료, 여름 캠페인, 이벤트 포스터에 식욕을 돋웁니다.

#F09819 #EDDE5D
트리플 파스텔 트렌디·밝음

보라·파랑·민트가 부드럽게 이어지는 Y2K 감성. 소셜 미디어, 앱 아이콘, 굿즈 디자인에 잘 어울립니다.

#A78BFA #60A5FA #34D399
스모키 차콜 모던·중후함

다크 그레이의 미묘한 변화. 남성 패션, 프리미엄 전자제품, 건축 포트폴리오에 무게감을 더합니다.

#232526 #414345
블러쉬 선라이즈 은은함·청량

부드러운 핑크가 옅은 아쿠아로 번지는 톤. 뷰티 앱과 스킨케어 패키지에 차분하고 모던한 느낌을 줍니다.

#FFDEE9 #B5FFFC
코튼 캔디 달콤·발랄

놀이공원의 핑크빛이 부드러운 살구색으로 번집니다. 키즈 브랜드와 발랄한 SNS 콘텐츠에 잘 맞습니다.

#FFAFBD #FFC3A0
밀키 라일락 부드러움·여성스러움

라벤더에서 로즈로 은은하게 번지는 톤. 패션 룩북과 여성스러운 패키지에 어울립니다.

#E9DEFA #FBD3E9
파우더 블루 허쉬 차분·경쾌

고요한 아침 같은 옅은 블루 톤. 차분하고 미니멀한 UI 배경에 잘 어울립니다.

#E0EAFC #CFDEF3
바닐라 크림 아늑·따뜻

따뜻한 크림색이 부드러운 카라멜로 깊어집니다. 베이커리와 홈굿즈 브랜드의 아늑한 배경에 좋아요.

#FFF6E5 #FFE0B5
소프트 피오니 로맨틱·섬세

피오니 핑크와 페리윙클 블루의 만남. 웨딩 청첩장과 플로럴 브랜딩에 어울리는 섬세한 조합입니다.

#FBC2EB #A6C1EE
모닝 포그 고요·뉴트럴

두 쿨그레이 사이의 거의 느껴지지 않는 변화. 텍스트가 많은 페이지의 튀지 않는 배경에 좋습니다.

#E6E9F0 #EEF1F5
슈가 피치 달콤·경쾌

솜사탕 핑크가 부드러운 모브로 번집니다. 디저트와 뷰티 브랜딩에 어울리는 가볍고 달콤한 톤입니다.

#FDCBF1 #E6DEE9
클라우드 나인 몽환·부드러움

구름 사이로 비치는 빛처럼 블러쉬와 하늘색이 섞입니다. 명상·수면 앱에 잘 어울립니다.

#F3E7E9 #E3EEFF
셔벗 스월 경쾌·과일향

노란 셔벗이 피치빛으로 녹아드는 조합. 아이스크림과 여름 메뉴에 식욕을 돋우는 경쾌한 톤입니다.

#F6D365 #FDA085
일렉트릭 바이올렛 미래적·대담

선명한 바이올렛이 마젠타로 솟구칩니다. 음악 페스티벌과 AI 제품 브랜딩에 강한 임팩트를 줍니다.

#7F00FF #E100FF
레이저 라임 활기·디지털

형광 그린이 민트로 이어지는 스트리크. 게이밍 HUD, e스포츠 브랜딩, 에너지 드링크 라벨에 어울립니다.

#A8FF78 #78FFD6
하이퍼 핑크 강렬·젊음

채도 높은 핑크가 짙은 퍼플로 부딪힙니다. Z세대 앱이나 스트리트웨어 드롭을 대표할 만큼 강렬합니다.

#FF0080 #7928CA
볼트 옐로우 고에너지·시선집중

전기빛 옐로우가 붉은 오렌지로 타오릅니다. 배너와 CTA에 쓰면 시선을 사로잡습니다.

#F5AF19 #F12711
사이버 틸 디지털·샤프

선명한 틸이 일렉트릭 블루로 이어집니다. 대시보드와 개발자 도구 브랜딩에 어울리는 날카로운 조합입니다.

#00F5A0 #00D9F5
네온 선셋 드라마틱·모던

핫핑크가 일렉트릭 인디고로 스며듭니다. 콘서트 포스터와 앱 스플래시 화면에 드라마틱한 배경이 됩니다.

#FC466B #3F5EFB
울트라 바이올렛 레이브 강렬·나이트라이프

깊은 플럼이 틸로 흘러갑니다. 무드 있고 강렬해서 나이트라이프·클럽 브랜딩에 자연스럽게 어울립니다.

#360033 #0B8793
래디오액티브 유니크·펀

경고보다는 재미있는 느낌의 톡식 그린에서 라임으로. 게임 굿즈와 재미있는 패키지 디자인에 좋아요.

#D4FC79 #96E6A1
플라즈마 버스트 폭발적·강렬

타오르는 오렌지레드가 마젠타로 폭발합니다. 스포츠와 게임 이벤트 브랜딩에 강한 임팩트를 줍니다.

#FF512F #DD2476
글리치 핑크 엣지·디지털

핫핑크가 앰버로 글리치처럼 튀는 조합. 스트리밍과 크리에이터 브랜드에 어울리는 엣지 있는 디지털 톤입니다.

#EE0979 #FF6A00
에메랄드 캐노피 무성함·생기

짙은 에메랄드가 밝은 봄초록으로 열립니다. 에코·아웃도어 브랜드에 무성하고 생기 있는 인상을 줍니다.

#11998E #38EF7D
오텀 휘트 수확·따뜻

황금빛 밀밭이 따뜻한 크림으로 번집니다. 베이커리와 팜투테이블 브랜딩의 가을 시즌 배색입니다.

#D1913C #FFD194
모시 스톤 어시·안정

숲의 이끼가 따뜻한 모래빛으로 깊어집니다. 인테리어와 도자기 브랜드에 안정감을 주는 미네랄 톤입니다.

#606C38 #DDA15E
데저트 듄 따뜻·건조

햇볕에 달궈진 모래가 테라코타 브라운으로 흘러갑니다. 여행·인테리어 브랜드의 사막 풍경을 연상시킵니다.

#E1C16E #C08552
화산재 무드·원시적

차콜 퍼플이 더스티 모브로 이어집니다. 에디토리얼 사진과 아트 디렉션에 어울리는 원시적인 무드입니다.

#4B4453 #7C6A85
세쿼이아 쉐이드 차분·숲

파인 그린이 세이지로 가라앉습니다. 아웃도어 장비와 웰니스 브랜딩에 어울리는 차분한 숲의 색입니다.

#2C5F2D #97BC62
리버 스톤 차분·고요

슬레이트 블루그레이가 옅은 안개빛으로 부드러워집니다. 스파와 웰니스 공간에 어울리는 고요한 톤입니다.

#757F9A #D7DDE8
테라코타 클레이 수공예·따뜻

번트 클레이 오렌지가 엄버로 깊어집니다. 수공예 제품과 카페 브랜딩에 인간적인 따뜻함을 더합니다.

#C1603A #7A3520
세이지 메도우 균형·자연

차분한 세이지가 따뜻한 피치로 가라앉습니다. 스킨케어와 식물성 브랜드에 어울리는 균형 잡힌 자연톤입니다.

#99B898 #FECEA8
글레이셔 블루 차가움·청정

깊은 빙하 블루가 얼음빛 화이트블루로 떠오릅니다. 워터·아웃도어 브랜드에 어울리는 청정한 톤입니다.

#83A4D4 #B6FBFF
갤럭시 드리프트 신비·깊이

깊은 우주의 블루를 지나는 3단 그라데이션. 천문 콘텐츠와 SF 브랜딩에 탁월합니다.

#0F2027 #203A43 #2C5364
네뷸라 헤이즈 신비로움·우주적

보라색이 먼 성운처럼 더스티 로즈로 번집니다. 점성술 앱과 우주 테마 디자인에 잘 어울립니다.

#654EA3 #EAAFC8
스타라이트 패스 고요·무한

거의 검정에 가까운 네이비가 스틸블루로 열립니다. 다크모드 UI와 천문대 콘텐츠에 무한한 느낌을 줍니다.

#16222A #3A6073
오로라 나이트 마법·대비

한밤의 인디고와 부드러운 핑크가 오로라처럼 만납니다. 이벤트 비주얼에 강렬한 인상을 줍니다.

#1D2B64 #F8CDDA
메테오 샤워 어두움·드라마틱

거의 검정에 가까운 퍼플이 짙은 크림슨으로 타오릅니다. 영화 포스터와 트레일러에 어울리는 시네마틱한 톤입니다.

#200122 #6F0000
말차 미스트 신선·차분

옅은 민트가 틸로 부드러워집니다. 말차 카페와 티 브랜드 패키지에 어울리는 신선하고 차분한 톤입니다.

#B7F8DB #50A7C2
베리 스무디 진한·과일향

진한 라즈베리가 인디고로 깊어집니다. 스무디바와 건강식품 브랜딩에 어울리는 대담하고 과일향 짙은 톤입니다.

#C33764 #1D2671
카라멜 드리즐 아늑·달콤

따뜻한 카라멜이 부드러운 탄색으로 녹아듭니다. 커피숍과 디저트 메뉴에 아늑하고 달콤한 느낌을 줍니다.

#C79081 #DFA579
크림소다 발랄·밝음

톡 쏘는 옅은 옐로우가 밝은 골드로 떠오릅니다. 소다 브랜딩과 여름 메뉴에 발랄한 분위기를 더합니다.

#FDEB71 #F8D800
블루베리 피즈 발랄·시원

시원한 코발트가 오키드 퍼플로 섞입니다. 음료 캔과 앱 아이콘에 어울리는 발랄하고 시원한 톤입니다.

#4568DC #B06AB3
슬레이트 시그널 전문적·신뢰

안정적인 슬레이트 블루가 하늘빛으로 밝아집니다. 금융 대시보드와 B2B 자료에 신뢰감을 주는 톤입니다.

#3A6186 #89A7C0
그래파이트 엣지 세련·모던

거의 검정에 가까운 그래파이트가 흐린 라벤더그레이로 번집니다. 다크모드 제품 UI에 세련된 톤입니다.

#1F1C2C #928DAB
클라우드 플랫폼 깔끔·기업형

두 오프화이트 사이의 거의 티 나지 않는 변화. 엔터프라이즈 SaaS 마케팅 페이지에 어울리는 깔끔한 톤입니다.

#F0F4F8 #D9E4F5
스틸 프레임 산업적·견고

쿨그레이가 차콜 네이비로 깊어집니다. 하드웨어와 제조업 브랜드에 견고한 인상을 주는 산업적인 톤입니다.

#BDC3C7 #2C3E50
시그널 블루 신뢰·명확

명확한 톤 변화를 가진 자신감 있는 블루. 핀테크 버튼과 신뢰 배지에 자주 쓰이는 정석 조합입니다.

#396AFC #2948FF
사파이어 뎁스 고귀·깊이

밝은 사파이어가 짙은 로열블루로 가라앉습니다. 프리미엄 금융과 주얼리 브랜드에 고귀한 깊이를 더합니다.

#0575E6 #021B79
루비 엘릭서 열정·드라마틱

짙은 루비 레드가 검정에 가깝게 어두워집니다. 럭셔리 코스메틱과 와인 라벨에 열정적인 드라마를 더합니다.

#870000 #190A05
에메랄드 주얼 럭셔리·진함

짙은 포레스트 에메랄드가 보석 같은 초록으로 밝아집니다. 프리미엄 패키지에 어울리는 진하고 럭셔리한 톤입니다.

#043927 #03C988
아메시스트 글로우 신비·럭셔리

빛나는 아메시스트 퍼플이 검정에 가까운 플럼으로 깊어집니다. 뷰티와 향수 브랜드에 신비롭고 럭셔리한 느낌을 줍니다.

#6441A5 #2A0845
토파즈 샤인 빛나는·대담

황금빛 토파즈가 불타는 듯한 레드오렌지로 이어집니다. 주얼리와 시상식 브랜딩에 빛나고 대담한 인상을 줍니다.

#F7B733 #FC4A1A

CSS 그라데이션 활용 가이드

그라데이션 코드, 프로젝트에 바로 적용하는 법

각 항목의 'CSS 복사' 버튼을 누르면 바로 쓸 수 있는 linear-gradient() 값이 복사됩니다. background 속성에 그대로 붙여넣기만 하면 별도 설정 없이 바로 적용돼요. 68가지 그라데이션은 분위기별로 묶여 있어서 원하는 느낌을 찾기 쉽습니다 — CTA나 배너엔 따뜻하고 에너지 넘치는 톤을, 앱 배경엔 차분하고 시원한 톤을, SNS 콘텐츠나 썸네일엔 대담하고 화려한 톤을 골라보세요.

복사한 CSS 코드를 어떻게 적용하나요?

background: linear-gradient(135deg, #A78BFA, #60A5FA); 처럼 background 속성의 값으로 스타일시트나 인라인 style 속성에 붙여넣으면 바로 적용됩니다.

그라데이션 방향(각도)을 바꾸려면?

deg 앞의 각도 숫자를 원하는 값으로 바꾸면 방향이 회전하고, to right나 to bottom처럼 키워드로 바꾸면 요소의 가장자리를 기준으로 방향이 정해집니다.

반응형에서 주의할 점은?

그라데이션 자체는 요소 크기에 맞춰 자동으로 늘어나지만, 그 위에 텍스트를 얹는다면 대비 체크 도구로 구간별 가독성을 확인해 보는 걸 추천합니다.