css 그라데이션 쉽게 넣기

css 그라데이션 쉽게 넣는

사이트를 알려드리겠습니다.

 

---

1. CSS 그라데이션 사이트

https://www.colorzilla.com/

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

ColorZilla

'컬러질라'라는 사이트로

그라데이션을 css 코드로

사용할 수 있게 해 주는 사이트입니다.

 

백문이불여일견

바로 확인하러 가봅시다.

 

-

 

---

2. CSS 그라데이션 고르기

Gradient

오른쪽의 Gradient 버튼을 클릭합니다.

 

-

 

그라데이션 선택

그라데이션 기본 제공 팔레트가 여러 개 있습니다.

원하는 그라데이션을 선택해주세요.

 

만약 원하는 그라데이션이 없다면

조절 바를 이용해 직접 그라데이션을 만들어주셔도 좋습니다.

 

선택 혹은 제작이 완료되었다면

오른쪽 CSS 칸을 봐주세요.

 

그라데이션이 CSS 코드로 변환된 모습입니다.

이 코드를 가져가서 사용하시면 그라데이션이 적용됩니다.

 

 

---

3. CSS 그라데이션 적용하기

CSS 복사

CSS 코드에 마우스를 올리면

오른쪽 아래에 copy 버튼이 생깁니다.

이 버튼을 클릭하면 한번에 복사가 가능합니다.

 

-

 

 

CSS 그라데이션 적용

코드와 적용된 그라데이션을 직접 확인해보실 수 있게

코드펜에서 예시 코드를 만들어보았습니다.

 

적용 화면과 코드를 비교해가며 확인해보세요.

 

 

---

이상으로 CSS 그라데이션 쉽게 넣는 사이트와 사용방법을 알려드렸습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - css background 단축 속성

css background 단축 속성

[coding/html + css] - text-indent CSS 들여쓰기 내어쓰기

text-indent CSS 들여쓰기 내어쓰기

 

그럼 이만.

총총.