68가지 큐레이션 그라데이션. HEX를 클릭하면 코드가, CSS 복사 버튼을 누르면 바로 쓸 수 있는 CSS가 복사됩니다.
노을빛 오렌지와 산호색의 만남. 드라이브, 포스터, 식음료 브랜드에 잘 어울립니다.
하늘빛 청록과 연두의 조합. 테크, 웰니스, 앱 UI 배경에 청량하게 사용하세요.
연핑크에서 딥로즈로. 웨딩, 뷰티, 봄 시즌 SNS 콘텐츠에 자주 쓰이는 정석 조합입니다.
연보라에서 하늘색으로 흐르는 부드러운 전환. 패션, 뷰티, 명상 앱에 자주 활용됩니다.
밝은 스카이블루에서 심해 네이비로. 금융, IT, 항공 브랜드의 신뢰감 있는 배경으로 탁월합니다.
황금빛 오렌지와 레몬 옐로우. 프리미엄 식품, 명품, 가을 시즌 디자인에 어울립니다.
하늘·보라·핑크가 이어지는 강렬한 네온 조합. 나이트클럽, 음악, 게임 브랜드에 어울립니다.
에메랄드에서 민트그린으로. 건강식품, 환경, 피트니스 브랜드에 신선한 느낌을 줍니다.
마젠타 핑크와 인디고 블루. AI, 크립토, 사이버펑크 무드의 브랜드에 완벽한 조합입니다.
크림에서 복숭아빛으로 이어지는 달콤한 그라데이션. 디저트, 스킨케어, 어린이 브랜드에 잘 맞습니다.
칠흑 같은 어둠 속 인디고의 미묘한 변화. 럭셔리, 테크, 다크 테마 UI에 깊이를 더합니다.
짙은 초록에서 라임으로. 스포츠, 아웃도어, 에코 브랜드의 생동감 있는 배경으로 활용하세요.
로즈골드의 따뜻한 광택감. 주얼리, 뷰티, 프리미엄 패키지 디자인에 고급스러운 분위기를 줍니다.
투명한 하늘빛에서 코발트로. 항공, 여행, 청정 이미지의 브랜드에 시원하고 넓은 인상을 줍니다.
어두운 틸에서 숲의 초록으로. 명상, 에코, 고급 호텔·리조트 브랜드에 깊은 안정감을 줍니다.
망고빛 오렌지에서 선명한 레몬으로. 음식·음료, 여름 캠페인, 이벤트 포스터에 식욕을 돋웁니다.
보라·파랑·민트가 부드럽게 이어지는 Y2K 감성. 소셜 미디어, 앱 아이콘, 굿즈 디자인에 잘 어울립니다.
다크 그레이의 미묘한 변화. 남성 패션, 프리미엄 전자제품, 건축 포트폴리오에 무게감을 더합니다.
부드러운 핑크가 옅은 아쿠아로 번지는 톤. 뷰티 앱과 스킨케어 패키지에 차분하고 모던한 느낌을 줍니다.
놀이공원의 핑크빛이 부드러운 살구색으로 번집니다. 키즈 브랜드와 발랄한 SNS 콘텐츠에 잘 맞습니다.
라벤더에서 로즈로 은은하게 번지는 톤. 패션 룩북과 여성스러운 패키지에 어울립니다.
고요한 아침 같은 옅은 블루 톤. 차분하고 미니멀한 UI 배경에 잘 어울립니다.
따뜻한 크림색이 부드러운 카라멜로 깊어집니다. 베이커리와 홈굿즈 브랜드의 아늑한 배경에 좋아요.
피오니 핑크와 페리윙클 블루의 만남. 웨딩 청첩장과 플로럴 브랜딩에 어울리는 섬세한 조합입니다.
두 쿨그레이 사이의 거의 느껴지지 않는 변화. 텍스트가 많은 페이지의 튀지 않는 배경에 좋습니다.
솜사탕 핑크가 부드러운 모브로 번집니다. 디저트와 뷰티 브랜딩에 어울리는 가볍고 달콤한 톤입니다.
구름 사이로 비치는 빛처럼 블러쉬와 하늘색이 섞입니다. 명상·수면 앱에 잘 어울립니다.
노란 셔벗이 피치빛으로 녹아드는 조합. 아이스크림과 여름 메뉴에 식욕을 돋우는 경쾌한 톤입니다.
선명한 바이올렛이 마젠타로 솟구칩니다. 음악 페스티벌과 AI 제품 브랜딩에 강한 임팩트를 줍니다.
형광 그린이 민트로 이어지는 스트리크. 게이밍 HUD, e스포츠 브랜딩, 에너지 드링크 라벨에 어울립니다.
채도 높은 핑크가 짙은 퍼플로 부딪힙니다. Z세대 앱이나 스트리트웨어 드롭을 대표할 만큼 강렬합니다.
전기빛 옐로우가 붉은 오렌지로 타오릅니다. 배너와 CTA에 쓰면 시선을 사로잡습니다.
선명한 틸이 일렉트릭 블루로 이어집니다. 대시보드와 개발자 도구 브랜딩에 어울리는 날카로운 조합입니다.
핫핑크가 일렉트릭 인디고로 스며듭니다. 콘서트 포스터와 앱 스플래시 화면에 드라마틱한 배경이 됩니다.
깊은 플럼이 틸로 흘러갑니다. 무드 있고 강렬해서 나이트라이프·클럽 브랜딩에 자연스럽게 어울립니다.
경고보다는 재미있는 느낌의 톡식 그린에서 라임으로. 게임 굿즈와 재미있는 패키지 디자인에 좋아요.
타오르는 오렌지레드가 마젠타로 폭발합니다. 스포츠와 게임 이벤트 브랜딩에 강한 임팩트를 줍니다.
핫핑크가 앰버로 글리치처럼 튀는 조합. 스트리밍과 크리에이터 브랜드에 어울리는 엣지 있는 디지털 톤입니다.
짙은 에메랄드가 밝은 봄초록으로 열립니다. 에코·아웃도어 브랜드에 무성하고 생기 있는 인상을 줍니다.
황금빛 밀밭이 따뜻한 크림으로 번집니다. 베이커리와 팜투테이블 브랜딩의 가을 시즌 배색입니다.
숲의 이끼가 따뜻한 모래빛으로 깊어집니다. 인테리어와 도자기 브랜드에 안정감을 주는 미네랄 톤입니다.
햇볕에 달궈진 모래가 테라코타 브라운으로 흘러갑니다. 여행·인테리어 브랜드의 사막 풍경을 연상시킵니다.
차콜 퍼플이 더스티 모브로 이어집니다. 에디토리얼 사진과 아트 디렉션에 어울리는 원시적인 무드입니다.
파인 그린이 세이지로 가라앉습니다. 아웃도어 장비와 웰니스 브랜딩에 어울리는 차분한 숲의 색입니다.
슬레이트 블루그레이가 옅은 안개빛으로 부드러워집니다. 스파와 웰니스 공간에 어울리는 고요한 톤입니다.
번트 클레이 오렌지가 엄버로 깊어집니다. 수공예 제품과 카페 브랜딩에 인간적인 따뜻함을 더합니다.
차분한 세이지가 따뜻한 피치로 가라앉습니다. 스킨케어와 식물성 브랜드에 어울리는 균형 잡힌 자연톤입니다.
깊은 빙하 블루가 얼음빛 화이트블루로 떠오릅니다. 워터·아웃도어 브랜드에 어울리는 청정한 톤입니다.
깊은 우주의 블루를 지나는 3단 그라데이션. 천문 콘텐츠와 SF 브랜딩에 탁월합니다.
보라색이 먼 성운처럼 더스티 로즈로 번집니다. 점성술 앱과 우주 테마 디자인에 잘 어울립니다.
거의 검정에 가까운 네이비가 스틸블루로 열립니다. 다크모드 UI와 천문대 콘텐츠에 무한한 느낌을 줍니다.
한밤의 인디고와 부드러운 핑크가 오로라처럼 만납니다. 이벤트 비주얼에 강렬한 인상을 줍니다.
거의 검정에 가까운 퍼플이 짙은 크림슨으로 타오릅니다. 영화 포스터와 트레일러에 어울리는 시네마틱한 톤입니다.
옅은 민트가 틸로 부드러워집니다. 말차 카페와 티 브랜드 패키지에 어울리는 신선하고 차분한 톤입니다.
진한 라즈베리가 인디고로 깊어집니다. 스무디바와 건강식품 브랜딩에 어울리는 대담하고 과일향 짙은 톤입니다.
따뜻한 카라멜이 부드러운 탄색으로 녹아듭니다. 커피숍과 디저트 메뉴에 아늑하고 달콤한 느낌을 줍니다.
톡 쏘는 옅은 옐로우가 밝은 골드로 떠오릅니다. 소다 브랜딩과 여름 메뉴에 발랄한 분위기를 더합니다.
시원한 코발트가 오키드 퍼플로 섞입니다. 음료 캔과 앱 아이콘에 어울리는 발랄하고 시원한 톤입니다.
안정적인 슬레이트 블루가 하늘빛으로 밝아집니다. 금융 대시보드와 B2B 자료에 신뢰감을 주는 톤입니다.
거의 검정에 가까운 그래파이트가 흐린 라벤더그레이로 번집니다. 다크모드 제품 UI에 세련된 톤입니다.
두 오프화이트 사이의 거의 티 나지 않는 변화. 엔터프라이즈 SaaS 마케팅 페이지에 어울리는 깔끔한 톤입니다.
쿨그레이가 차콜 네이비로 깊어집니다. 하드웨어와 제조업 브랜드에 견고한 인상을 주는 산업적인 톤입니다.
명확한 톤 변화를 가진 자신감 있는 블루. 핀테크 버튼과 신뢰 배지에 자주 쓰이는 정석 조합입니다.
밝은 사파이어가 짙은 로열블루로 가라앉습니다. 프리미엄 금융과 주얼리 브랜드에 고귀한 깊이를 더합니다.
짙은 루비 레드가 검정에 가깝게 어두워집니다. 럭셔리 코스메틱과 와인 라벨에 열정적인 드라마를 더합니다.
짙은 포레스트 에메랄드가 보석 같은 초록으로 밝아집니다. 프리미엄 패키지에 어울리는 진하고 럭셔리한 톤입니다.
빛나는 아메시스트 퍼플이 검정에 가까운 플럼으로 깊어집니다. 뷰티와 향수 브랜드에 신비롭고 럭셔리한 느낌을 줍니다.
황금빛 토파즈가 불타는 듯한 레드오렌지로 이어집니다. 주얼리와 시상식 브랜딩에 빛나고 대담한 인상을 줍니다.
각 항목의 'CSS 복사' 버튼을 누르면 바로 쓸 수 있는 linear-gradient() 값이 복사됩니다. background 속성에 그대로 붙여넣기만 하면 별도 설정 없이 바로 적용돼요. 68가지 그라데이션은 분위기별로 묶여 있어서 원하는 느낌을 찾기 쉽습니다 — CTA나 배너엔 따뜻하고 에너지 넘치는 톤을, 앱 배경엔 차분하고 시원한 톤을, SNS 콘텐츠나 썸네일엔 대담하고 화려한 톤을 골라보세요.
background: linear-gradient(135deg, #A78BFA, #60A5FA); 처럼 background 속성의 값으로 스타일시트나 인라인 style 속성에 붙여넣으면 바로 적용됩니다.
deg 앞의 각도 숫자를 원하는 값으로 바꾸면 방향이 회전하고, to right나 to bottom처럼 키워드로 바꾸면 요소의 가장자리를 기준으로 방향이 정해집니다.
그라데이션 자체는 요소 크기에 맞춰 자동으로 늘어나지만, 그 위에 텍스트를 얹는다면 대비 체크 도구로 구간별 가독성을 확인해 보는 걸 추천합니다.