CSS 그라디언트 생성기
선형·원형·원뿔형·반복 CSS 그라디언트를 만듭니다 — 투명도 있는 색상 스톱, 프리셋, 실시간 미리보기, 복사용 코드. 업로드 없음, 브라우저 처리.
프리셋
background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 100%);🔒 브라우저에서 생성되며 업로드되지 않습니다.
CSS 그라디언트를 시각적으로
색상 스톱을 최대 8개까지 추가해 각각 위치와 불투명도를 정하고, 선형·원형·원뿔형과 각도 또는 원형의 모양·범위·중심을
고르세요. 미리보기는 바로 아래 적힌 background 선언 그 자체로 칠해지므로, 보이는 그대로 붙여넣게 됩니다.
준비된 프리셋에서 시작하거나 색을 다시 뽑고, 방향을 뒤집고, 전체 화면으로 크게 볼 수도 있습니다. 모든 설정은 공유 링크에
담깁니다.
선형·원형·원뿔형
선형은 지정한 각도의 직선을 따라, 원형은 옮길 수 있는 중심에서 바깥으로(원 또는 타원), 원뿔형은 중심을 기준으로 색을 회전시키며 섞습니다 — 색상환·파이 차트·진행 링에 유용합니다. 반복을 켜면 세 가지 모두 상자 전체에 되풀이해 깔립니다. 모두 이미지 없이 순수 CSS입니다.
투명도와 구형 브라우저
스톱의 불투명도를 낮추면 그라디언트가 뒤에 있는 것과 자연스럽게 섞입니다. 색은 hex로 적히며 — 반투명한 스톱은 여덟
자리 #rrggbbaa가 됩니다 — 원하면 rgba() 표기로 바꿀 수 있고, 그라디언트를 모르는 구형
브라우저를 위해 단색 대체값 줄을 앞에 함께 내보낼 수도 있습니다.
자주 묻는 질문
어디에나 쓸 수 있나요?
네. 생성된 값은 모든 최신 브라우저에서 어떤 요소의 CSS 배경으로도 동작합니다.
색을 몇 개까지 넣을 수 있나요?
2개부터 8개까지 넣을 수 있습니다. 각 스톱은 고유한 색·위치·불투명도를 가지며, 2개까지 언제든 제거할 수 있습니다.
각도가 모든 유형에 적용되나요?
각도는 선형과 원뿔형에 적용됩니다. 원형은 중심에서 바깥으로 퍼지므로 각도 대신 원/타원 모양, 범위(farthest-corner·closest-side 등), 중심 위치를 고릅니다.
투명하게 사라지는 그라디언트도 되나요?
네. 스톱마다 불투명도 슬라이더가 있습니다. 반투명한 스톱은 여덟 자리 #rrggbbaa hex로 적히며, 표기를 RGBA로 바꾸면 rgba()로 나옵니다.
반복은 무슨 기능인가요?
repeating-linear-gradient·repeating-radial-gradient·repeating-conic-gradient를 내보내, 스톱이 덮는 구간을 상자 전체에 되풀이해 깔아줍니다. 마지막 스톱을 100% 아래로 옮기면 반복이 보입니다.
업로드되는 게 있나요?
아니요. 색 선택에 따라 브라우저에서 그라디언트를 만들 뿐 아무것도 전송되지 않습니다.