UI Gradient

디자인을 고민할 때 그라데이션을 적용하고싶을 때가 있는데 그럴 때 사용하기 유용한 사이트를 소개해 보려고 한다. 검색 창에서 'UI Gradient'라고 검색해보면 쉽게 찾을 수 있으며 다양한 조합의 그라데이션 샘플들을 확인할 수 있다.

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

uigradients.com

위의 링크로 사이트에 접속하면 가장 먼저 그라데이션이 나타나는 페이지가 나타난다.

정해진 스타일이지만 깔끔하게 색조합이 이루어져있기에 많은 분들이 사용하고 있는 것 같다. 우측 상단에 버튼이 4개 있는데 '회전 / CSS 코드 / 목록에 추가 / JPG 이미지로 다운로드' 버튼들이다.

회전 버튼을 누르면 90도씩 회전하여 그라데이션 방향이 변경된다.

CSS 코드를 보는 버튼이다. 누르면 다음과같이 CSS 코드가 팝업되고 복사 버튼을 통해 Copy하여 사용하는 스킨 CSS에 그대로 메소드 적용하면 된다.

목록 추가 버튼인데 대부분 사용하지 않는 것 같다.

이미지 파일(*.jpg)로 저장하는 버튼이다.

좌측 상단의 'show all gradients'를 눌러보시면 다양한 스타일의 그라데이션이 나온다.목록에서 원하시는 스타일의 그라데이션을 선택하여 사용하면 된다.

※ 이 글이 도움이 되었다면 "🤍공감" 버튼을 클릭해주세요. 클릭 한번이 글 쓰는데 큰 힘이 됩니다.

MoonNote