CSS 그라데이션 생성기 – 선형·방사형 배경과 CSS 코드 만들기

CSS 그라데이션 생성기 사용법

1. 선형 또는 방사형 그라데이션 선택
타입 선택에서 선형 또는 방사형 그라데이션을 선택할 수 있습니다.
선형은 가로, 세로, 대각선 등 다양한 방향의 배경을 만들 수 있습니다.
방사형 그라데이션(Radial Gradient)은 중심에서 바깥쪽으로 색상이 퍼져나가는 형태로 특정 영역을 강조하거나 빛이 퍼지는 듯한 배경 효과를 만들 때 활용할 수 있습니다.

2. 2 Color 또는 3 Color 선택
색상 수도 2 Color와 3 Color 중 하나로 선택이 가능하며 선형과 방사형 모두 2 Color와 3 Color를 사용할 수 있습니다.

3. 원하는 그라데이션 색상 설정
각 색상 영역의 컬러 피커를 눌러 원하는 색상을 선택할 수 있으며, HEX 색상 코드를 알고 있다면 값을 직접 입력할 수도 있습니다.
#4FACFE, #8E54E9, #F093FB처럼 원하는 HEX 값을 입력하면 해당 색상이 바로 그라데이션에 반영됩니다.
색상을 변경할 때마다 미리보기도 실시간으로 바뀌기 때문에 여러 색상을 비교하면서 원하는 조합을 찾을 수 있습니다.

4. 색상 위치를 퍼센트로 조절
각 색상이 배치되는 위치는 0%~100% 범위에서 조절할 수 있습니다.
슬라이더를 움직이거나 퍼센트 값을 직접 입력하면 색상이 시작되거나 전환되는 위치를 세밀하게 변경할 수 있습니다. 
3 Color에서는 가운데 색상의 위치를 움직여 특정 색상을 더 넓게 보이게 하거나 색상 변화가 집중되는 영역을 만들 수도 있습니다.

5. 선형 그라데이션 각도 설정
선형 그라데이션에서는 0°~360° 범위의 각도를 조절하여 색상이 진행되는 방향을 변경할 수 있습니다.
같은 색상을 사용하더라도 각도에 따라 전혀 다른 느낌의 배경 디자인을 만들 수 있습니다.
방사형 그라데이션은 중심에서 바깥쪽으로 퍼지는 방식이므로 각도 설정을 사용하지 않습니다.

6. 색상 순서 반전
순서 반전 기능을 사용하면 현재 선택한 색상들의 배치 순서를 빠르게 뒤집을 수 있습니다.

7. 랜덤 그라데이션 만들기
어떤 색상을 조합해야 할지 고민된다면 랜덤 생성 기능을 사용할 수 있습니다.
현재 선택한 선형 또는 방사형 타입과 2 Color/3 Color 설정에 맞춰 색상 조합을 자동으로 생성합니다. 
랜덤 버튼을 여러 번 사용하면서 마음에 드는 조합을 찾은 뒤 색상과 위치를 직접 조금씩 수정하는 것도 좋은 방법입니다.

8. 그라데이션 프리셋 활용
직접 색상을 고르지 않고 빠르게 디자인하고 싶다면 미리 준비된 그라데이션 프리셋을 선택할 수 있습니다.
프리셋을 누르면 조화로운 색상 조합이 즉시 적용되며 미리보기에서 결과를 바로 확인할 수 있습니다.
2 Color와 3 Color 설정에 맞는 다양한 조합을 살펴본 뒤 원하는 색상이나 위치를 다시 조절할 수도 있습니다.

9. 완성된 CSS 코드 복사
설정을 변경할 때마다 현재 그라데이션에 맞는 CSS 코드가 자동으로 생성됩니다.
디자인이 완성되면 CSS 복사 버튼을 눌러 코드를 복사한 뒤 HTML이나 CSS 파일의 원하는 요소에 적용하면 됩니다.
별도로 CSS 문법을 직접 작성하지 않아도 미리보기에서 확인한 그라데이션을 그대로 코드로 사용할 수 있습니다.