FrontEnd/css

[css] CSS 그라데이션 색 추천과 코드 생성 해주는 uigradients

김평범님 2022. 2. 17. 23:00
반응형

css 그라데이션 추천 사이트

좀 더 감각 있는 버튼, 배경을 만들어줄 때 그러데이션 효과를 많이 이용한다.

대부분 그라데이션 효과가 있을 때는 CSS를 이용해서 작성을 해주는데

디자이너가 별도로 있는 분들이라면 색을 지정해서 오지만

 

혼자서 개발을 할 때는 적절한 색 조합을 찾지 못하는 경우도 많다.

이때 유용한 색상 조합의 그러데이션 샘플을 제공해주는 사이트인 uigradients를 이용해보도록 하자

 

 

그러데이션 추천 사이트 uigradients

uigradients는 다양한 그라데이션 색 조합을 추천해주는 사이트이다.

웹퍼블리셔나 디자이너분들은 해당 사이트에서 적절한 색상 코드를 찾을 수도 있다.

 

먼저 사이트에 접속해보자

uigradients.com/

 

uiGradients - Beautiful colored gradients

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

uigradients.com

 

uigradients

먼저 사이트에 접속하면 왼쪽 상단의 show all gradients를 클릭하면

해당 사이트에서 추천하는 그러데이션 색상을 확인할 수 있다.

해당 그러데이션 중 마음에 드는 그라데이션을 선택해보자

 

👩‍💻css 그라데이션 코드 생성하기

uigradients get css code

마음에 드는 그러데이션 색상을 찾았다면 우측 상단의 <> 아이콘을 클릭을 하면

css코드가 생성이 된다.

uigradients css코드

css코드는 그냥 복사만 해서 사용하면 되기 때문에 매우 간단하게

내가 필요한 그러데이션 코드를 바로 생성할 수 있다.

 

 

 

반응형