ToolAtlas색 정지점과 각도로 linear-gradient 문자열을 만듭니다. 이미지 파일 변환이 아닙니다. 그 위 글자는 지점마다 대비가 다릅니다.
티스토리 헤더나 사내 채용 마이크로사이트를 단색 대신 배경 그라데이션으로 열고 싶을 때입니다. 이 페이지는 CSS를 만들고 복사합니다. 이력서 사진에 필터를 씌우거나 카카오톡 앨범을 칠하지 않습니다.
그림자는 박스 섀도입니다. 배색은 색상 팔레트입니다. 본문 가독성은 대비 검사입니다.
블로그 배경으로 붙일 때
꾸미기 CSS에 background 한 줄을 넣습니다. 카톡 인앱으로 글을 열면 그라데이션 위 흰 제목이 흐려 보일 수 있습니다. 메일 HTML 서명에 같은 코드를 넣으면 아웃룩이 배경을 막을 때가 있으니, 서명에는 단색이 더 안전한 경우가 많습니다.
메시 그라데이션 에디터나 디자인 시스템 토큰 발급이 아닙니다.
그 위 글자가 읽히는지
- 방향과 정지색을 고릅니다.
- 나온 코드를 스타일에 붙입니다.
background: linear-gradient(135deg, #1f2937, #0ea5e9);- 흰 글자를 올릴 거면 가장 어두운 지점과 밝은 지점을 각각 재세요.
사람인 기업 페이지나 잡코리아 배너는 포털이 올린 이미지라, 여기서 만든 CSS를 그 칸에 넣을 수 없습니다. 자체 랜딩·티스토리 헤더처럼 스타일을 직접 쓰는 곳에만 붙이세요. 카톡 오픈그래프 카드는 그림 파일이므로 그라데이션을 PNG로 구워야 하면 시안 도구가 따로 필요합니다.
웨일·카톡 인앱에서 블로그를 열면 그라데이션 위 흰 제목이 더 흐려 보입니다. 배포 전에 휴대폰으로 한 번 확인하세요.
코드는 탭에 남습니다. 포토샵 그라데이션 맵이 아닙니다.