DEV · GRADIENT
CSS 그라데이션
색상과 각도를 정하면 CSS 코드와 미리보기를 즉시 보여줍니다.
- 1.시작 색과 끝 색 두 가지를 선택합니다
- 2.선형(linear) 또는 방사형(radial) 종류를 고릅니다
- 3.선형일 때는 각도 슬라이더로 방향을 조절합니다
- 4.오른쪽에서 미리보기를 확인하고 생성된 CSS 코드를 복사합니다
→ 결과물: 그라데이션 미리보기와 복사용 CSS background 코드
미리보기
CSS 코드
background: linear-gradient(135deg, #3d2566, #b69cff);
이 도구는
두 색과 각도를 고르면 그대로 쓸 수 있는 CSS `linear-gradient` 코드를 만들어 줍니다. 결과를 눈으로 보면서 색과 방향을 조절할 수 있어, 코드를 고치고 새로고침하는 왕복을 줄여 줍니다.
이럴 때 씁니다
- —버튼이나 배너의 배경 그라데이션을 정하고 코드로 옮길 때
- —브랜드 색 두 개를 이어 붙인 헤더 배경을 시험해 볼 때
- —각도만 바꿔 가며 어느 방향이 자연스러운지 비교할 때
알아둘 점
- —두 색 사이를 잇는 선형 그라데이션만 만듭니다. 원형(radial)이나 색 정거장이 셋 이상인 형태는 지원하지 않습니다.
- —채도가 크게 다른 두 색을 이으면 중간에 탁한 회색 띠가 보일 수 있습니다. 밝기가 비슷한 색끼리 이으면 덜합니다.
- —생성된 코드는 표준 CSS라 별도 접두사 없이 최신 브라우저에서 그대로 동작합니다.