[#. ETC] 디자이너 없이 개발할 때 참고하기 유용한 사이트(color, gradient, svg, png, background)

 

 

 

 

 

ColorSpace

 

원하는 색상 하나를 지정하면 그 색상과 어울리는 색상들을 뽑아준다

 

https://mycolor.space/

ColorSpace - Color Palettes Generator and Color Gradient Tool

 

 

 

 

 

* gradient = 한 가지 또는 그 이상의 색을 자연스럽게 변화시켜 색상 변화를 단계별로 표현한 것

 

 

 

 

 

 

CSS Gradient

 

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

 

 

 

 

 

 

Shape Divider App

 

gradient를 동적으로 만들어 주고 SVG(Scalable Vector Graphics)로 사용할 수 있게 해준다

 

https://www.shapedivider.app/

Shape Divider App

 

 

 

 

 

<div class="custom-shape-divider-top-1641516442">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>
</div>

.custom-shape-divider-top-1641516442 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

 

 

 

 

 

 

Haikei

 

유니크한 gradient을 만들 수 있고 SVG(Scalable Vector Graphics) 또는 PNG로 저장할 수 있다

 

https://app.haikei.app/

Haikei

 

 

 

 

 

 

 

 

 

 

 

Cool Backgrounds

 

유니크한 background를 만들 수 있고 PNG로 저장할 수 있다

 

https://coolbackgrounds.io/

Cool Backgrounds

 

 

 

 

 

 

 

 

 

 

Dribble

 

디자인을 참고하기 좋고, 결제해서 사용할 수도 있다

 

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals