한눈에 보는 정의
두 가지 이상의 색이 부드럽게 이어지며 바뀌는 화면 표현. 웹에서는 CSS로 이미지 없이 만든다.
이런 말로 들어요
- 버튼 배경을 파란색에서 남색으로 은은하게 그라데이션 넣어 주세요.
- 배경 그라데이션 각도만 살짝 바꿔 볼게요.
그림으로 보기
CSS만으로 이미지 없이 색이 이어지는 배경을 만듭니다. 상세 페이지에서는 방향을 직접 바꿔 볼 수 있습니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
상담 신청
background: linear-gradient(180deg, #cfdff5, #fff);자세히 알아보기
배경, 버튼, 글자에 색의 흐름을 줄 때 씁니다. 직선 방향으로 바뀌는 선형 그라데이션과 중심에서 퍼지는 원형 그라데이션이 대표적입니다. 이미지 파일을 쓰지 않으므로 용량 부담이 거의 없습니다.
실무 예시
예를 들어 히어로 섹션 배경을 위쪽 밝은 하늘색에서 아래쪽 흰색으로 바꾸면, 사진 없이도 화면에 깊이가 생깁니다.
함께 살펴볼 점
그라데이션 위 글자는 가장 밝은 부분과 가장 어두운 부분 모두에서 읽혀야 합니다. 색 단계가 적은 이미지로 저장하면 줄무늬(밴딩)가 보일 수 있습니다.
AI에게 이렇게 요청해 보세요
히어로 섹션 배경을 #EDF2FB에서 #FFFFFF로 위에서 아래로 바뀌는 linear-gradient로 만들어 줘. 그 위 제목 글자 대비가 충분한지도 확인해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- <gradient> CSS type | MDN 새 창
MDN에서 CSS 그라데이션 종류(linear, radial, conic 등)를 확인했습니다.
자료 확인 - linear-gradient() | MDN 새 창
선형 그라데이션의 방향·색 지점 문법을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정