CSS 그라디언트 프리셋
바로 쓸 수 있는 CSS 그라디언트 모음입니다. 스와치를 클릭하면 `background` 값이 복사되고, 그라디언트 도구를 열면 각도와 색을 직접 조정할 수 있습니다.
도구 열기 →Sunset
linear-gradient(135deg, #ff512f 0%, #f09819 100%)Ocean
linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%)Purple Haze
linear-gradient(135deg, #667eea 0%, #764ba2 100%)Mint
linear-gradient(135deg, #00b09b 0%, #96c93d 100%)Cherry
linear-gradient(135deg, #eb3349 0%, #f45c43 100%)Midnight
linear-gradient(135deg, #232526 0%, #414345 100%)Peach
linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)Sky
linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)Forest
linear-gradient(135deg, #134e5e 0%, #71b280 100%)Berry
linear-gradient(135deg, #c31432 0%, #240b36 100%)Gold
linear-gradient(135deg, #f7971e 0%, #ffd200 100%)Lavender
linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)Steel
linear-gradient(135deg, #4b6cb7 0%, #182848 100%)Rose
linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)Emerald
linear-gradient(135deg, #11998e 0%, #38ef7d 100%)Flamingo
linear-gradient(135deg, #f857a6 0%, #ff5858 100%)Cobalt
linear-gradient(135deg, #0f2027 0%, #2c5364 100%)Citrus
linear-gradient(135deg, #f2994a 0%, #f2c94c 100%)Grape
linear-gradient(135deg, #41295a 0%, #2f0743 100%)Aurora
linear-gradient(135deg, #43cea2 0%, #185a9d 100%)Dusk
linear-gradient(135deg, #536976 0%, #292e49 100%)Coral
linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)Radial Glow
radial-gradient(circle, #ff9966 0%, #ff5e62 100%)Radial Ice
radial-gradient(circle, #e0eafc 0%, #cfdef3 100%)자주 묻는 질문
- 이 그라디언트는 어떻게 쓰나요?
- 스와치(또는 복사 버튼)를 클릭하면 CSS 값이 복사됩니다. 그 값을 원하는 요소의 `background` 속성에 붙여넣으면 됩니다. 현재 모든 브라우저에서 접두사 없이 동작합니다.
- 각도나 색을 바꿀 수 있나요?
- 네. 그라디언트 도구를 열면 프리셋을 그대로 쓰거나 직접 조합할 수 있고, 실시간 미리보기와 함께 최종 `background` 값을 한 번에 복사할 수 있습니다.
- `background-image` 로도 쓸 수 있나요?
- 네. `linear-gradient()`·`radial-gradient()` 값은 `background`·`background-image` 양쪽 모두에 유효합니다. 이미 쓰고 있는 속성에 그대로 넣으면 됩니다.
- 업로드되거나 기록되는 게 있나요?
- 없습니다. 이 페이지와 그라디언트 도구는 전부 브라우저 안에서만 동작하며, 아무 것도 전송하지 않습니다.
