CSS 그라디언트 생성기

선형·방사형 그라디언트의 색상, 위치와 각도를 조절하고 미리 보며 CSS를 만듭니다.

모드

선형 그라디언트 방사형 그라디언트

각도

이 브라우저에서만 처리하며 업로드하거나 저장하지 않습니다.

도구 소개

선형·방사형 그라디언트의 색상, 위치와 각도를 조절하고 미리 보며 CSS를 만듭니다.

디자인 도구

종류와 색상 지점을 선택하세요. 선형은 각도도 조절할 수 있습니다. 2–8개 지점, 위치 0–100%, 각도 -360°–360°를 지원하며 같은 위치의 색은 뚜렷한 경계를 만듭니다. 방사형은 가운데 타원입니다. 결과의 background 선언을 복사하거나 저장하세요.

HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.

디자인 도구

WCAG 2.2에 따라 글자와 배경의 대비를 계산하고 일반·큰 글자의 AA와 AAA 충족 여부를 표시합니다.

디자인 도구

이동, 흐림, 확산, 색상과 불투명도를 조절해 안쪽·바깥쪽 그림자를 미리 보고 CSS를 얻습니다.

디자인 도구

이미지나 영상의 비율을 약분하고 목표 너비 또는 높이에 맞는 나머지 길이를 계산합니다.

디자인 도구

하여 토론에 참여하세요.

아직 댓글이 없습니다.