그라데이션 사이트
디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상 사용할 때 어색하게 조합을 한다면 전체 느낌이 죽을 수 있습니다. 하지만 조합이 잘된 그라데이션(Gradation) (=그라디언트(Gradient))을 사용한다면 포인트 강조 및 백그라운드를 더 멋있게 살릴 수 있습니다. 은은한톤부터 대비톤까지 잘 조합된 그라데이션 사이트를 살펴보겠습니다.
※ CSS Copy 표기는 웹사이트를 포함한 모든 그래픽 툴에서 사용할 수 있는 컬러 코드입니다.
01 ui Gradients
특징: 테마별 (2색, 3색 톤) 그라데이션 제공 / 컬러 카테고리 분류
자료: CSS Copy
좌측 상단 메뉴의 Show all gradients를 클릭하면 다양한 컬러 카테고리가 나옵니다.
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
uigradients.com
02 Egg gradients
특징: 달걀 모양의 귀여운 프리뷰 / 컬러 카테고리 분류
자료: CSS Copy
Gradient Background Colors - Eggradients.com
Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends. And it is served in the form of eggs. ✓ With hex and CSS codes.
www.eggradients.com
03 Khroma
특징: 테마별 컬러 제공, 단색 투톤, 이미지 그라데이션 팔레트로 컬러 추출, Ai 기능으로 맞춤형 컬러 추천
자료: CSS Copy
메인 홈페이지에서 Generate를 클릭하면 다양한 팔레트를 선택할 수 있습니다.
Khroma - The AI color tool for designers
Khroma is the fastest way to discover, search, and save color combos and palettes you'll love.
www.khroma.co
04 Free Mesh
특징: 3색톤 그라이데이션 조합 제공
자료: Ai, EPS, JPG, PNG 파일 제공 (이메일 입력 필요)
Free Mesh Gradient Collection
100 mesh gradients in .sketch, .png, .ai, .jpg, .eps
products.ls.graphics
05 Color Space
특징: 지정 컬러에 어울리는 톤 추천, 2색, 3색 컬러 제공
자료: CSS Copy
ColorSpace - Color Palettes Generator and Color Gradient Tool
Just Enter a Color! And Generate nice Color Palettes
mycolor.space
06 Web Gradients
특징: 약 180가지 그라데이션 추천, 원형 배열로 클릭시 확대
자료: CSS Copy, PNG, PSD, Sketch
Free Gradients Collection by itmeo.com
Free collection of 180 background gradients that you can use as content backdrops in any part of your website.
webgradients.com
07 Cool Hue 2.0
특징: 60가지 그라데이션 추천
자료: CSS Copy, PNG, Photoshop Palette(*.grd)
Gradient Colors Collection Palette - CoolHue 2.0
Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.
webkul.github.io
08 CSS Gear
특징: 23가지 그라데이션 추천 웹상에서 톤 범주 조절 가능
자료: CSS Copy, XD
09 Abstract Gradients
특징: 비비드톤 5가지 그라데이션
자료: Ai, PNG
그 외 FDR 사이트 내 PSD, 목업, HTML, CSS, XD, Vector, Icons, UI Kits 등다양한 그래픽 정보 제공
High Resolution Abstract Gradients Freebie
High Resolution Abstract Gradients Freebie is a free gradient for your project and editable in Adobe Illustrator Format. However, This High
freedesignresources.net
10 Pale Gradients Freebie
특징: 파스텔톤 5가지 그라데이션
자료: Ai, PNG
그 외 FDR 사이트 내 PSD, 목업, HTML, CSS, XD, Vector, Icons, UI Kits 등다양한 그래픽 정보 제공
High-Resolution Pale Gradients Freebie
High-Resolution Pale Gradients Freebie is an awesome Adobe Illustrator Format gradient for your design. However, This High-Resolution Pale Gradients Freebie
freedesignresources.net
11 Unicorn Vector Gradients
특징: 유니콘에서 영감을 받은 25가지 그라데이션
자료: Ai, JPG
Unicorn Vector Gradients — Amrit Pal Singh | Visual Artist | NFTs | Toy Faces | 3D Art
🦄 Unicorn Vector Gradients Free collection of 25 trendy vector gradients inspired by Unicorns. P.S. No unicorns were harmed during the making of this product.
amrit.art
12 Gradient Hunt
특징: 인기있는 그라데이션 세트 구성
자료: PS(유료), PNG
Gradient Hunt - Beautiful Color Gradients
Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project and save all the gradients you like.
gradienthunt.com
다른 정보 참고하기
// 그 외 유용한 사이트가 있다면 댓글로 남겨주시면 추가하겠습니다~!
'그래픽자료 > 레퍼런스자료' 카테고리의 다른 글
| 색이야기 - 주황색(Orange) (0) | 2021.08.29 |
|---|---|
| 색이야기 - 빨간색(Red) (0) | 2021.08.26 |
| 디즈니 애니메이션 12법칙 (5) | 2020.07.16 |
| 라이팅과 재질의 기초지식 (0) | 2017.07.16 |
| 한장으로 보는 조리개, 셔터 스피드, 감도 (0) | 2017.06.18 |
