CSS Gradient Generator

Create CSS gradients

Create CSS gradients 브라우저에서 로컬로 실행됩니다.

Start colour

End colour

Angle135°

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

About the

CSS 그라디언트 생성기는 두 가지 색상과 각도로 실제 선형 또는 방사형 그라디언트를 구축하고 전체 크기로 표시하며 CSS를 전달합니다. 각도는 사람들이 잘못 읽는 부분입니다. CSS에서 0deg는 위쪽을 가리키고 방향은 시계 방향으로 회전하므로 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 움직입니다. 이를 잘못 이해하면 처음에 그라디언트가 종종 거꾸로 보이는 이유가 됩니다. 두 색상 모두 8자리 알파 값을 전달할 수 있으며, 이는 히어로 이미지에서 그라데이션을 페이드 아웃하는 방법입니다.

Where people use the

두 가지 브랜드 색상 사이에서 희미해지는 영웅 배경을 구축합니다.
코드에서 커밋하기 직전에 어떤 각도가 보이는지 테스트합니다.
카드나 버튼에 미묘한 수직 그라데이션을 생성합니다.
사진을 어둡게 만드는 반투명 오버레이 만들기

How to use the

1
시작 및 끝 색상 선택
색상 선택기를 사용하거나 16진수 값을 입력하세요. 미리보기와 CSS는 변경 시 업데이트됩니다.
2
선형 또는 방사형 선택
선형은 선택한 각도로 상자를 가로지릅니다. 방사형은 중심에서 바깥쪽으로 원형으로 퍼집니다.
3
각도를 설정하세요
슬라이더를 0도에서 360도까지 드래그합니다. 위로 0도 포인트, 오른쪽으로 90도 포인트, 아래로 180도 포인트, 왼쪽으로 270도 포인트를 기억하세요.
4
CSS를 복사하세요
규칙은 스타일시트에 직접 붙여넣거나 원하는 경우 배경 이미지 속성에 붙여넣을 수 있는 배경 선언입니다.

팁 및 모범 사례

텍스트가 포함된 배경에는 작은 휘도 차이를 선호합니다. 산만 함이 아니라 질감으로 읽혀집니다.
그라데이션 위에 있는 텍스트의 경우 평균뿐만 아니라 가장 밝은 지점과 가장 어두운 지점의 대비를 확인하세요.
경사도를 2~3스톱으로 유지하세요. 더 진흙탕처럼 보이는 경향이 있습니다.

자주 묻는 질문

각도는 어느 쪽을 가리키나요?

0도는 요소 상단을 가리키며 각도는 시계 방향으로 증가합니다. 즉 90도는 오른쪽으로 가고 180도는 아래쪽으로 갑니다. 오른쪽에서 시계 반대 방향으로 측정된 수학 각도에 익숙하다면 이는 직관에 반합니다.

내 그라데이션이 줄무늬로 보이는 이유는 무엇입니까?

휘도가 가까운 두 가지 색상이 8비트 디스플레이에서 특히 넓은 영역에 걸쳐 가시적인 단계를 생성하기 때문입니다. 미묘한 세 번째 스톱을 추가하거나 약간 더 넓은 휘도 범위를 사용하면 일반적으로 숨겨집니다.

투명도를 사용할 수 있나요?

예. 완전 투명의 경우 667eea00, 절반의 경우 667eea80과 같은 8자리 16진수 값을 사용하면 그 뒤에 있는 모든 것 위로 그라데이션이 희미해집니다.

그라데이션은 모든 곳에서 지원되나요?

선형 및 방사형 그래디언트는 접두어 없이 현재 모든 브라우저에서 지원됩니다. 공급업체 접두사는 매우 오래된 버전의 Safari 및 Android에만 필요합니다. 이는 실제로 2015년 이후에는 빌드된 것이 없음을 의미합니다.

내 그라데이션이 표시되지 않는 이유는 무엇입니까?

요소에 높이가 없기 때문입니다. 요소 상자에 그라데이션이 그려지므로 빈 div는 높이가 0으로 축소되고 아무것도 표시되지 않습니다. 높이를 설정하거나 콘텐츠를 추가하세요.

두 개 이상의 색상 정지점을 생성합니까?

아니요, 이 도구는 두 가지를 처리합니다. 다중 정지점 그라데이션의 경우 생성된 CSS를 가져와 직접 정지점을 추가합니다. 구문은 단순히 쉼표로 구분된 색상 및 백분율 쌍입니다.