–
오늘 소개할 서비스는 ‘Gradientify’입니다. 100여 개의 그라데이션 사례를 확인할 수 있는 곳으로, 작게는 2개 크게는 3개 컬러로 구성된 내용이 등록되어 있습니다. 그라데이션을 직접 생성하기 어려운 경우, 어떻게 구성하면 좋을지에 대한 충분한 정보와 활용 방법을 제공하는 곳이기도 합니다.
그라데이션 사례로 구성된 기본 리스트 모습입니다. 어떤 컬러가 포함되어 있는지 확인할 수 있으며, 바로 활용할 수 있는 CSS 값을 복사할 수 있는 버튼도 포함되어 있습니다. 저장(찜)하기 기능도 있어 탐색 중 마음에 드는 그라데이션을 하나씩 남겨둘 수 있어요.
특정 그라데이션을 선택해 상세 화면으로 진입하면, 더 자세한 정보를 확인할 수 있습니다. 상세 값에 대한 정보는 물론, PNG로 내려받을 수 있는 버튼도 제공하는 모습이네요. PNG의 경우 몇 개의 그라데이션 후보를 공유하거나 문서 등에 첨부할 때 유용하게 활용할 수 있습니다.
기본적인 기능에 충실하면서 100여 개 이상의 그라데이션 사례를 볼 수 있다는 점이 이곳의 가장 큰 매력이라고 할 수 있습니다. 그라데이션 사례 역시 다양하게 구성되어 있어 제공되는 코드를 그대로 활용하거나 참고해 또 다른 모습을 만들어내기 좋은 환경을 제공합니다.
직접 구성하기 어려운 상황이거나, 사용하기에 편한 그라데이션 사례를 찾고 있다면 좋은 선택지가 될 수 있을 거라 생각합니다. 사례를 하나씩 모두 확인해봤는데 모두 매력적인 모습을 갖고 있네요! 자세한 내용은 ‘링크’를 참고해주세요.
- 각각 100, 180여개의 ‘Gradient’ 컬렉션을 확인, 무료 다운로드 받을 수 있는 곳 : mesh-gradients / webgradients
- CSS-Gradient, 웹상에서 매력적인 조합을 만들어낼 수 있다면?
- 콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘Gradient-buttons’
–
