CSS 그라데이션 만들기 (여러 겹·반복)

선형·원형·원뿔형 그라데이션을 최대 4겹 쌓아 배경을 만들고 완성된 background-image CSS를 복사합니다. 반투명 겹으로 빛이나 메쉬 느낌을 내거나, 반복 옵션으로 줄무늬·고리 무늬를 만들고, 같은 그림을 PNG로도 저장합니다.

사용 방법

1. '프리셋'에서 비슷한 것을 고르거나 그대로 시작합니다. 오른쪽 '겹' 목록에서 고칠 겹을 누르고 '종류', '각도', '반복'을 정합니다.
2. 원형·원뿔형이면 미리보기를 누르거나 끌어 중심을 옮기고, '모양'과 '크기'를 고릅니다.
3. '색 정지점' 막대를 누르면 정지점이 생기고 동그라미를 끌면 위치가 바뀝니다. 선택한 정지점의 색, '불투명도', '위치', '중간점'을 아래에서 조절합니다.
4. '겹 추가'로 반투명 겹을 위에 쌓고, 순서와 '숨기기'로 효과를 비교합니다.
5. CSS 칸의 '복사'로 코드를 가져가거나 'PNG 크기'를 정해 'PNG 저장'을 누릅니다.

계산 방식과 참고

• 출력은 background-image 한 줄이며 겹은 CSS 순서대로 위에서 아래로 그려집니다. 반투명 색은 rgb(r g b / a)로 적습니다.
• 중간점은 두 정지점 사이에서 색이 반씩 섞이는 지점을 옮기는 CSS 전환 힌트입니다. 반복은 repeating-linear-gradient처럼 첫 정지점부터 마지막 정지점까지를 되풀이합니다.
• 선형 각도와 원형 크기 키워드(가장 먼 모서리 등)는 CSS Images 3의 규칙을 따르고, 색 섞기는 브라우저의 기본인 sRGB 보간입니다. PNG는 같은 규칙으로 브라우저 안에서 직접 그립니다.
• 작업 중인 겹과 정지점은 이 기기의 브라우저에 저장되어 다음에 열어도 그대로입니다.

자주 묻는 질문

그라데이션을 여러 겹 겹치려면 CSS를 어떻게 쓰나요?

background-image에 그라데이션을 쉼표로 이어 적으면 됩니다. 먼저 적은 것이 위에 그려지므로 위 겹은 반투명해야 아래가 보입니다. 이 페이지의 CSS 칸이 그 형식으로 만들어 줍니다.

줄무늬 배경은 어떻게 만드나요?

'반복'을 켜고 같은 색 정지점 두 개를 같은 위치에 놓아 경계를 날카롭게 하면 됩니다. '프리셋'의 줄무늬를 고른 뒤 각도와 간격만 바꾸는 것이 빠릅니다.

중간색이 탁하게 보이는데 어떻게 하나요?

'중간점'을 켜서 섞이는 지점을 옮기거나 중간에 정지점을 하나 더 넣어 원하는 색을 직접 지정하세요. 보색끼리 섞이면 회색이 생기기 쉽습니다.

미리보기와 PNG가 다를 수 있나요?

미리보기는 브라우저가 CSS로 그리고 PNG는 같은 규칙을 코드로 계산해 그립니다. 반올림 차이 외에는 같아야 하며 다르면 문의 링크로 알려 주세요.