CSS 그라디언트 생성기

그라디언트를 시각적으로 디자인하고 CSS 코드를 한 번에 복사하세요.

제보
왼쪽에서 유형과 정지점을 조정하고 오른쪽에서 미리보기를 확인한 뒤, 준비되면「복사」를 누르세요.
그라디언트 설정
135°
미리보기와 코드
1
유형 선택
선형·방사형·원뿔형 중에서 고릅니다. 방사형이면 타원 또는 원형도 선택할 수 있습니다.
2
방향·각도 조절
선형과 원뿔형은 슬라이더로 각도를 돌립니다. 방사형은 각도 대신 모양 옵션으로 퍼짐을 조정합니다.
3
색과 정지점 편집
스와치로 색을 고르거나 6자리 HEX를 입력합니다. 위치 슬라이더로 각 정지점의 비율을 맞춥니다.
4
미리보기·복사·초기화
오른쪽에 결과와 CSS가 실시간으로 표시됩니다. 프리셋으로 빠르게 시작하거나 도구 모음의 초기화로 기본 두 색으로 돌아갈 수 있습니다.

배경 관련 스타일에 붙여 넣어 사용하세요. 투명하게 페이드하려면 복사한 뒤 색을 반투명 값으로 바꾸면 됩니다.

어떤 상황에 잘 맞나요?
히어로 영역·버튼·카드 배경을 꾸밀 때, 사진 위에 그라디언트를 얹어 글자 가독성을 높일 때, 디자인 확정 전에 색 조합을 빠르게 시험할 때 유용합니다.
선형·방사형·원뿔형의 차이는 무엇인가요?
선형은 직선 방향으로 색이 섞여 배너에 잘 어울립니다. 방사형은 중심에서 바깥으로 퍼져 스포트라이트나 원형 버튼에 적합합니다. 원뿔형은 중심을 축으로 색이 돌아가 파이 차트 같은 느낌을 줍니다.
한쪽이 투명해지게 할 수 있나요?
가능합니다. 먼저 그라디언트를 만든 뒤 CSS를 복사하고, 색 하나를 반투명 표기나 지원되는 투명 키워드로 바꾼 다음 스타일시트에 붙여 넣으세요.
생성된 CSS는 브라우저에서 잘 동작하나요?
선형과 방사형은 주요 브라우저에서 널리 지원됩니다. 원뿔형은 최신 상시 업데이트 브라우저에서 일반적으로 사용할 수 있습니다. 아주 오래된 환경이면 작은 페이지로 먼저 테스트하는 것이 좋습니다.
색 정지점은 꼭 두 개여야 하나요?
부드러운 블렌드를 위해 최소 두 가지 색이 필요합니다. 더 섬세한 전환을 원하면「정지점 추가」로 세 번째 이후 색을 넣고 위치를 각각 조절하세요.
프리셋을 누르면 무엇이 바뀌나요?
해당 프리셋의 색과 각도가 적용되고 유형은 선형으로 돌아갑니다. 처음의 두 색 구성으로 되돌리려면 도구 모음의「초기화」를 사용하세요.
이미지 압축 밈 만들기 SNS 마케팅
2026-05-17

온라인 이미지 압축/편집 도구: 고화질 밈 및 SNS 게시물 시각화 가이드

인기 있는 밈과 SNS 게시물을 만들고 싶지만 이미지 용량 제한, 크기 불일치, 칙칙한 색상으로 어려움을 겪고 계신가요? 온라인 이미지 압축 및 색상 변환 도구를 사용하여 화질을 최적화하고 시선을 사로잡는 콘텐츠를 만드는 방법을 소개합니다.

이미지 처리 색상 공간 이미지 압축
2026-06-24

디지털 이미지 최적화: 색상 공간에서 압축 알고리즘까지의 심층 의사결정 가이드

이미지 형식 선택의 근본 논리를 파헤치고, SVG와 비트맵의 성능 및 시각적 손실 차이를 분석하여 전문적인 이미지 처리 의사결정을 돕습니다.

이미지 최적화 웹 성능 SVG
2026-06-14

시각 자산 최적화: SVG와 비트맵의 시나리오별 선택 가이드

웹사이트 로딩 속도와 시각적 경험의 균형을 맞출 때 올바른 이미지 포맷 선택은 필수적입니다. 본 글에서는 SVG와 전통적인 비트맵의 작동 원리를 분석하고 실전 의사결정 전략을 제공합니다.

이미지 처리 포맷 최적화 웹 성능
2026-06-14

디지털 이미지 시각 최적화: 색 공간, 압축 알고리즘 및 포맷 선택 실무

이미지 처리의 핵심 메커니즘을 깊이 있게 분석하고, 색 공간 선택부터 벡터 및 래스터 포맷의 성능 비교까지 웹과 디자인 워크플로우에서 최적의 의사결정을 내리는 가이드를 제공합니다.

이미지 처리 이미지 형식 시각 최적화
2026-06-09

이미지 형식 선택 논리: 색상 충실도에서 네트워크 전송까지의 의사결정 매트릭스

이미지 형식의 기초 메커니즘을 분석하고, SVG 벡터 이미지와 비트맵(PNG/JPG/WebP)의 각 상황별 선택 전략 및 시각 최적화 지표를 다룹니다.

이미지 처리 이미지 최적화 컬러 스페이스
2026-06-04

디지털 이미지 처리: 컬러 포맷 및 압축 기술의 최적화 전략

디지털 이미지의 핵심 기술을 깊이 있게 다루며, 컬러 스페이스 선택부터 압축 알고리즘 응용까지 화질과 파일 크기 사이의 최적의 균형점을 찾는 방법을 설명합니다.