CSS 그래디언트 생성기
선형 및 방사형 CSS 그래디언트를 시각적으로 작성하고 CSS 코드 복사
색상 중단점
CSS 출력
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);CSS 그래디언트란?
CSS 그래디언트 생성기는 그래디언트 문법을 직접 작성하지 않고도 부드러운 색상 전환을 만들 수 있는 시각적 도구입니다. CSS에서 그래디언트는 이미지 파일 없이 브라우저가 직접 렌더링하는 둘 이상의 색상 간 부드러운 전환입니다. CSS Image Module Level 4 사양은 그래디언트 함수를 이미지 값의 한 유형으로 정의하므로, background-image, list-style-image, border-image 값이 허용되는 모든 곳에 사용할 수 있습니다. 브라우저는 렌더링 시점에 그래디언트를 래스터화하므로 어떤 해상도에서도 선명하게 표시되며 고DPI 화면에서도 흐릿한 결과물이 생기지 않습니다. CSS 그래디언트 생성기를 사용하면 색상과 위치를 시각적으로 조정한 뒤 완성된 CSS 규칙을 복사할 수 있어 시간을 절약하고 추측을 줄일 수 있습니다.
CSS는 세 가지 주요 그래디언트 형태를 지원합니다: 직선을 따르는 선형(linear), 중심점에서 바깥쪽으로 퍼지는 방사형(radial), 중심점을 기준으로 회전하는 원뿔형(conic)입니다. 각 형태는 색상과 선택적 위치(백분율 또는 길이 값)를 지정하는 색상 중단점 목록을 받습니다. 브라우저는 기본적으로 sRGB 색상 공간을 사용하여 중단점 사이의 색상을 보간하며, CSS Color Level 4에서는 oklch나 lab 같은 다른 색상 공간을 지정하여 지각적으로 더 부드러운 전환을 만들 수 있습니다.
그래디언트는 웹에서 대부분의 장식적 용도에서 이미지 기반 배경을 대체합니다. CSS 규칙 하나로 과거에는 Photoshop 내보내기와 HTTP 요청이 필요했던 작업을 처리할 수 있습니다. 해상도에 독립적이며 CSS 자체 외에 네트워크 대역폭이 전혀 필요 없고 표준 CSS 속성으로 애니메이션이나 전환 효과를 적용할 수 있습니다. 그래디언트 문법은 2013년부터 모든 주요 브라우저에서 안정적으로 지원되며, 접두사 없는 형태가 Chrome, Firefox, Safari, Edge에서 폴백 없이 작동합니다.
이 CSS 그래디언트 생성기를 사용하는 이유
그래디언트 문법을 직접 작성하면 중단점 위치를 추측하고, 각도 값을 확인하고, 결과를 보려고 반복적으로 새로 고쳐야 합니다. 시각적 빌더를 사용하면 그래디언트를 만들면서 실시간으로 확인하고, 드래그로 중단점을 조정하고, 원하는 모양이 나왔을 때 최종 CSS를 복사할 수 있습니다.
CSS 그래디언트 생성기 활용 사례
CSS 그래디언트 유형 참조
CSS는 다섯 가지 그래디언트 함수를 정의합니다. 세 가지 기본 유형(linear, radial, conic)에는 각각 패턴을 반복하는 변형이 있습니다. repeating-linear-gradient()와 repeating-radial-gradient()는 줄무늬 배경과 동심원 링에 유용합니다. 모든 그래디언트 함수는 HEX, RGB, HSL, 명명된 색상, oklch 등 모든 CSS 색상 형식의 중단점을 허용합니다. 다섯 가지 함수 모두 Chrome, Firefox, Safari, Edge에서 사실상 전 세계적으로 지원되며 공급업체 접두사가 필요 없습니다.
| 함수 | 예시 문법 | 방향 | 일반적인 용도 |
|---|---|---|---|
| linear-gradient() | to right, #f00, #00f | Straight line | Backgrounds, hero sections, progress bars |
| radial-gradient() | circle, #f00, #00f | Outward from center | Spotlight effects, buttons, badges |
| conic-gradient() | from 0deg, #f00, #00f | Sweep around center | Pie charts, color wheels, spinners |
| repeating-linear | to right, #f00 0 10px, #00f 10px 20px | Tiled line | Stripes, progress indicators, decorative borders |
| repeating-radial | circle, #f00 0 10px, #00f 10px 20px | Tiled circle | Concentric ring patterns, retro textures |
선형 vs 방사형 vs 원뿔형 그래디언트
각 그래디언트 유형은 색상을 기하학적 구조에 다르게 매핑합니다. 올바른 유형을 선택하는 것은 품질 차이가 아니라 필요한 시각적 효과에 달려 있습니다. 대부분의 페이지 배경과 섹션 구분자에는 선형 그래디언트가 적합한 기본 선택입니다. 가장 이해하기 쉽고 다양한 크기의 요소에서 가장 예측 가능합니다. 방사형과 원뿔형 그래디언트는 원형이나 회전 기하학이 단순한 장식이 아닌 의미 있는 특정 시각적 효과에 더 적합합니다.
코드 예제
JavaScript, Python, CSS, Go에서 CSS 그래디언트를 프로그래밍 방식으로 생성하고 적용하는 예제입니다. 각각 스타일시트나 인라인 스타일에 직접 사용할 수 있는 유효한 CSS 그래디언트 문자열을 만들어냅니다.
// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
const parts = stops.map(s => `${s.color} ${s.position}%`)
return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}
const stops = [
{ color: '#6366f1', position: 0 },
{ color: '#ec4899', position: 50 },
{ color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
parts = [f"{color} {pos}%" for color, pos in stops]
return f"linear-gradient({angle}deg, {', '.join(parts)})"
stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
return [
f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
for i in range(steps)
]
interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']/* Linear gradient — left to right */
.hero {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}
/* Radial gradient — circular spotlight */
.badge {
background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}
/* Conic gradient — color wheel */
.wheel {
background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
border-radius: 50%;
}
/* Multi-stop with transparency */
.overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 60%,
rgba(0, 0, 0, 0.9) 100%
);
}
/* Repeating stripes */
.stripes {
background: repeating-linear-gradient(
45deg,
#6366f1 0 10px,
transparent 10px 20px
);
}package main
import "fmt"
// Stop represents one color stop in a gradient.
type Stop struct {
Color string
Position int // percent 0-100
}
func buildGradient(angle int, stops []Stop) string {
result := fmt.Sprintf("linear-gradient(%ddeg", angle)
for _, s := range stops {
result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
}
return result + ")"
}
func main() {
stops := []Stop{
{"#6366f1", 0},
{"#ec4899", 50},
{"#f59e0b", 100},
}
fmt.Println(buildGradient(135, stops))
// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}