CSS 그라디언트 생성기: 선형, 방사형, 원뿔형(및 각도 트랩)

나는 오후의 대부분을 한 번 그라데이션으로 잃어 버렸습니다. 복잡한 것이 아니라 WP Adminify 마케팅 페이지의 영웅 배경,브랜드 블루가 브랜드 오렌지색으로 퇴색하고 대각선으로 썼다 linear-gradient(45deg, #4466EE, #E99537) 그리고 잘못된 방향으로 갔습니다. 그래서 저는 시도했습니다 -45deg. 또한 잘못된. 그럼 135deg는, 어떤 옳았다, 그리고 나는 이유를 이해하지 않고 이동, 이는 당신을 보장하기 때문에 최악의 가능한 결과이다'll 다시 잘못 얻을.

그 이유는 CSS 그라디언트 각은 수학시간에 배운 각이 아니기 때문입니다. 0deg 포인트 위로을 하고, 각도가 증가한다 시계방향. 삼각법에서 - 그리고 SVG 에서,그리고 캔버스에서는 - 0 점 직각과 각도가 시계 반대 방향으로 증가합니다. 두 개의 다른 규칙,하나의 동일한 모양 deg 단위, 그리고 오류 메시지 없음 잘못 된 하나를 선택할 때. It's에 명백 하 게 적혀 CSS 이미지 모듈 레벨 3그리고 나는 그것을 읽은 적이 없었습니다.

That's 는 하나의 일화에서 시각적 생성기의 경우입니다. The 그라데이션 생성기 Toolz.dev에서는 실시간 미리보기, 드래그 가능한 색상 정지, 선형, 방사형 및 원뿔형 그라데이션에 대한 복사 가능한 CSS를 제공하므로 각도 질문은 오후 비용을 지불하는 대신 자체적으로 답변합니다.

TL;DR: Css에서는 0deg 를 가리킨다 탑 그리고 각도가 실행됩니다 시계방향, 그래서 to right 같음 90deg 그리고 왼쪽 상단 → 오른쪽 하단 대각선은 다음과 같습니다 135deg, 아니다 45deg. 사용 그라데이션 생성기 추측하기보다는 보기 위해서, 그리고 컬러 피커 중간에 진흙 투성이가 don't 그 중지를 선택하려면. 그라데이션은 <image> 값 - 사용할 수 있는 모든 곳 url()를, 그라디언트를 사용할 수 있습니다 모든 클라이언트 측, 가입 없음.

기술적으로 CSS 그라데이션이란 무엇입니까?

그라데이션은 색상이 아닙니다. It's an 이미지. 그 하나의 사실이 대부분의 구문을 설명해준다.

페르 CSS 이미지 레벨 3, linear-gradient(), radial-gradient()그리고 반복되는 변형은 유형 값을 생성합니다 <image>. 즉,spec 이 허용하는 모든 곳을 의미합니다 url('photo.jpg'), 그라디언트도 허용합니다: background-image, border-image, list-style-image, mask-image, content. 또한 gradients 가 가지고 있다는 것을 의미한다 본질적인 차원이 없습니다- 그들은 당신이 넣은 상자를 채우기 위해 스트레칭을합니다, 이는 왜 같은 그라데이션이 200px 버튼과 1400px 영웅에서 다르게 보이는 이유입니다.

conic-gradient() 나중에 와서 살고 있습니다 CSS 이미지 레벨 4보간-색상-공간 구문 I'와 함께 아래로 이동하세요.

What's 선형, 방사형 및 원뿔형의 차이점?

선형 기울기 - 및 각도 규칙

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

이것을 메모리에 커밋하면 you'll never repeat my afternoon:

There's 코너 키워드로 미묘함 하나 더. to bottom right 하다 아닙니다 단순히 의미합니다 135deg. 사양은 경사선이 수직이 되도록 선택된 각도로 정의합니다 다른 대각선 - 정사각형이 아닌 상자에 있음을 의미합니다 to bottom right 그리고 135deg 눈에 띄게 다른 결과를 생산. 사각형에 they're 동일. That's 는 카드가 디자인에서 오른쪽과 좁은 열에서 잘못 보이는 경우 오후 11 시에 알아 차리는 종류의 것입니다.

방사형 그라데이션 - 크기 키워드가 있는 곳입니다

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

4가지 크기의 키워드가 위치를 결정합니다 최종 중앙에서 측정한 색상 정지 랜드:

• closest-side- 상자의 가장 가까운 가장자리
• farthest-side- 가장 먼 가장자리
• closest-corner- 가장 가까운 코너
• farthest-corner- 가장 먼 모퉁이(기본값입니다)

키워드를 변경하면 그라데이션이 다른 그라데이션처럼 보입니다. 이것이 방사형 그라데이션 "won't do what I want"의 가장 일반적인 단일 이유이며, 의 네 가지 옵션을 클릭하는 것이 훨씬 빠릅니다 그라데이션 생성기 그것에 대해 추론하는 것보다.

원뿔형 그라데이션 - 파이, 바퀴, 링

원뿔형이 색상을 휩쓸고 있습니다 주변 12 o'clock에서 시작하여 시계 방향으로 가는 중앙(선형과 동일한 규칙 - 적어도 it's 일관됨).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

그 mask 선은 모든 도넛 진행률 표시기 뒤에 전체 트릭입니다 you've 이제까지 본, 그리고 it's SVG 라이브러리 대신 CSS의 여섯 줄에 대 한.

색상이 표시되는 위치를 어떻게 제어하나요?

색상이 멈춥니다

정지 위치를 지정하면 전환을 제어할 수 있습니다.Give a stop a position and you control the transition 둘 위치를 지정하면 보간이 전혀 필요 없이 하드 에지를 얻을 수 있습니다.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

보간 힌트 (당신이 한 중간 지점't know you could move)

벌거벗은 백분율 사이 두 가지 색상이 50/50 중간점을 움직입니다. 이것은 제가 아는 그라데이션 구문에서 가장 잘 사용되지 않는 부분입니다:

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

이미지 스크림에 사용합니다. A to top, rgba(0,0,0,.8), transparent 오버레이는 일반적으로 사진을 너무 많이 먹습니다; a를 떨어뜨립니다 35% 힌트를 주면 어둠은 캡션이 있는 바닥을 향해 무너집니다.

패턴에 대한 반복적인 그라데이션

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

한 줄,이미지 파일 없음,무한 확장 가능. don't 만 전체 페이지 요소에 적용한 다음 중간 범위의 Android 에서 스터터를 스크롤하는 이유 - 스크롤 중에 큰 반복 그라데이션을 다시 칠하는 것이 컴포지터의 실제 작업인지 궁금합니다.

내 그라데이션이 중간에 진흙투성이로 보이는 이유는 무엇입니까?

두 가지 별도의 원인이 있으며 사람들은 이를 지속적으로 통합합니다.

원인 1: sRGB 보간

기본적으로 브라우저는 채널별로 sRGB 에서 그라데이션 스톱을 혼합합니다. 휠에서 서로 가까이 앉는 두 가지 색상 - 파란색에서 보라색,주황색에서 빨간색 - that's fine.for complementary colors it produces a dead grey band in the middle,because the mathematical midpoint of two opposed sRGB colors 이다 대략 회색. 파란색에서 노란색이 고전적인 범죄자입니다.

CSS Images Level 4 는 보간 공간의 이름을 지정하도록 하여 이 문제를 해결합니다:

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch 블렌드 전체에 걸쳐 인지된 가벼움과 크로마를 안정적으로 유지합니다. 브라우저 지원 in <colorspace> 구문은 현재 크롬, 사파리, 파이어 폭스에서 좋은, 하지만 당신은 이전 브라우저를 지원 해야 하는 경우, 대체는 이전 수동 수정입니다: 중간 정지를 추가 하 고 자신을 혼합을 조종.

원인 2: 페이딩 transparent- 그리고 두 번째 실수

transparent 로 정의된다 rgba(0, 0, 0, 0). 투명한 블랙. 브라우저가 순진하게 보간된 경우 linear-gradient(#E99537, transparent) 아무것도 없는 방향으로 점점 더 어둡고 회색빛 주황색을 미끄러질 것입니다.

현대 브라우저 don't 는 저것을 한다 - spec 는 in 보간을 요구한다 미리 곱한 문제를 완전히 회피하는 알파 공간. 그러나 오래된 WebKit 은 그렇지 않았고,나는 내 기계에서 깨끗하게 보이고 2 년 된 iPad 에서 더러운 얼룩처럼 보이는 클라이언트 사이트에 영웅을 출하했습니다. 비용이 들지 않고 여전히 모든 곳에서 작동하는 방탄 버전:

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

나는 아직도 흉터 조직에서 그런 식으로 쓴다.

접근성을 고려하여 무엇을 주의해야 합니까?

대비는 전체 기울기에 걸쳐 유지되어야 합니다

WCAG 2.1 SC 1.4.3 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1(18pt 또는 14pt 굵은 글씨)이 필요합니다. 그라데이션은 배경색이 픽셀마다 다르기 때문에 요구 사항을 충족해야 함을 의미합니다 최악의 경우 포인트 - 텍스트가 흰색인 경우 가장 밝은 패치, it's 검정색인 경우 가장 어두운 패치입니다.

신뢰할 수 있는 패턴은 그라데이션 자체를 읽을 수 있도록 만들려는 시도를 중지하고 위에 스크림을 레이어링하는 것입니다:

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

이제 텍스트는 아래의 그라데이션이 무엇을 하는지에 관계없이 알려진 어두운 범위에 위치합니다. 로 끝을 확인하십시오 컬러 피커 배송 전 - 2.38:1에 배송한 브랜드 색상을 포함한 전체 대비 연습이 제공됩니다 컬러 피커 가이드.

그라데이션 텍스트는 다락문입니다

이것은 실제로 생산 방문 페이지에서 나를 태운 것입니다:

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

만약에 background-clip: text doesn't 는 어떤 이유로든 적용됩니다 - 오래된 브라우저,배경 이미지를 차단하는 확장 프로그램,인쇄 스타일시트 - you're left with color: transparent 그리고 an 보이지 않는 제목. 텍스트가 아직 DOM 에 있으므로 화면 판독기가 행복하게 읽으며 잘못된 것이 있는지 전혀 알 수 없습니다. 사용 @supports 그것을 게이트하려면:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

기본적으로 단색, 향상으로 그라데이션. That's how it should have been written the first time.

애니메이션 그라데이션에는 모션 이스케이프 해치가 필요합니다

You can't 전환 그라데이션 색상- 브라우저 won't 는 둘 사이에 보간합니다 <image> 가치. 사람들이 대신 애니메이션하는 것은 background-position 대형 그라데이션에 걸쳐:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

마지막 차단은 선택 사항이 아닙니다. 지속적인 배경 동작은 전정 장애 및 명예를 위한 문서화된 유발 요인입니다 prefers-reduced-motion 는 세 줄.

(현대적인 대안은 사용자 정의 속성을 등록하는 것입니다 @property 그래서 그 종류는 알려져 있고 그러므로 애니메이션을 적용한 다음 그라데이션 내부에서 사용합니다. It's clean,it's 현재 브라우저에서 지원되며 it's 는 여전히 감소된 동작 가드를 가질 가치가 있습니다.)

도구를 사용하여 어떻게 구축합니까?

1. 열다 그라데이션 생성기.
2. 선형, 방사형 또는 원뿔형 유형을 선택하세요.
3. 정지점을 클릭하여 색상을 변경하고; 드래그하여 위치를 이동합니다. 막대를 클릭하여 정지점을 추가하고; 드래그하여 제거합니다.
4. 선형의 경우 각도를 드래그하십시오. 숫자보기: 이것은 어디에 0deg-is-up 컨벤션은 추상적이지 않습니다.
5. 방사형의 경우 4 가지 크기 키워드를 순환하고 변경 사항을 확인하십시오. It's the fast way to build intuition for them.
6. CSS 를 복사합니다.

두 가지 색상이 일반적으로 올바른 답입니다. 모든 그라데이션 I & # 39;ve regretted 는 다섯 가지 정지를 가졌습니다.

훔칠 가치가 있는 그라데이션

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

자신만의 브랜드 색상을 입력하세요 컬러 피커 먼저 HSL 값을 취한 다음 색조보다는 가벼움을 다양하게 변경하십시오 - that's how you get stops that blendly instead of fighting.

자주 묻는 질문

왜 CSS 그라디언트가 잘못된 방향으로 가고 있습니까?

CSS 경사각은 에서 시작하므로 탑 그리고 증가 시계방향는 오른쪽에서 시작해서 시계 반대 방향으로 가는 삼각법, SVG, 캔버스와는 달리. to right 이다 90deg, to bottom 이다 180deg그리고 왼쪽 상단에서 오른쪽 하단 대각선은 다음과 같습니다 135deg, 아니다 45deg.

나는 아직도 필요합니까 -webkit- CSS 그라디언트의 접두사?

위한 아니다 linear-gradient(), radial-gradient(), 또는 conic-gradient()- 모든 현재 브라우저에서 세 가지 모두 접두사가 붙지 않은 상태로 작동합니다. 접두사가 여전히 유지되는 한 곳은 다음과 같습니다 -webkit-background-clip: text 구형 Safari 가 필요한 그라데이션 텍스트의 경우 두 선언 모두 그곳에 발송합니다.

CSS 그라디언트를 애니메이션할 수 있나요?

그라데이션 값 자체가 아닙니다. 그라데이션은 입니다 <image>그리고 브라우저 won't 두 이미지 사이에 보간. 표준 해결 방법은 그라데이션을 해당 상자보다 훨씬 크게 만드는 것입니다 (background-size: 600% 600%) 그리고 애니메이트 background-position. 현대적인 접근 방식은 사용자 정의 속성을 등록합니다 @property 그래서 알려진 타입을 가지고 있고 그라데이션 안에서 애니메이션을 만들 수 있게 됩니다. 어느 쪽이든,로 보호하세요 prefers-reduced-motion.

내 그라데이션이 중간에 회색이나 진흙처럼 보이는 이유는 무엇입니까?

거의 항상 바퀴에 서로 반대편에 앉아 색상 사이의 sRGB 보간 - 노란색에 파란색은 고전이다. 그들의 sRGB 중간점은 진정으로 회색에 가깝습니다. 더 나은 보간 공간을 명명하여 수정, linear-gradient(in oklch, to right, blue, yellow)또는 중간 정지 장치를 추가하여 블렌드를 직접 조종합니다.

왜 페이딩이 되는가 transparent 더러워 보여?

transparent 로 정의된다 rgba(0, 0, 0, 0)- 투명한 블랙. 현재 브라우저는 미리 곱해진 알파 공간에서 보간되므로 더 이상 문제가 되지 않지만 이전 WebKit은 나가는 길에 그레이를 통해 그라데이션을 드래그했습니다. 이전 장치를 지원하는 경우 자신의 색상의 제로 알파 버전을 명시적으로 작성하십시오: rgba(233, 149, 55, 0) 대신 transparent.

그라디언트 테두리는 어떻게 만들까요?

두 가지 옵션. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; 한 줄이지만 조용히 죽입니다 border-radius당신이 둥근 구석을 필요로 하는 경우에. 다른을 가진 2 개의 배경을 층을 이루십시오 background-clip 그리고 background-origin 값을 지정하거나 상자 뒤의 의사 요소에 기울기를 배치합니다.

CSS 그라디언트는 성능에 좋지 않습니까?

정적 그라데이션은 저렴합니다. 동등한 이미지를 다운로드하는 것보다 저렴하며 모든 크기로 무료로 확장됩니다. 큰 그라데이션이 있어야 할 때 비용이 표시됩니다 다시 칠해졌습니다 반복: 스크롤 중 전체 페이지 반복 그라데이션 또는 a 아래에 여러 계층화된 그라데이션 backdrop-filter. 페이지가 모바일에서 끈적끈적한 느낌이 들면,that's the first thing I'd check in DevTools' 페인트 프로파일러.

그라데이션에는 몇 개의 색상 중지가 있어야 합니까?

두,대부분의 시간. 당신이 특정 색조를 통해 블렌드를 조종 할 때 세. 그 너머 you're 일반적으로 메쉬 그라데이션 (여러 위치 방사형) 더 나은 일을 뭔가를 도달하고,각 여분의 정지는 다른 사람에게 잘못 볼 수있는 하나 더 많은 것입니다's 디스플레이.

CSS 에서 그라디언트 배경을 어떻게 만들 수 있습니까?

설정하세요 background (또는 background-image) 그래디언트 함수에 대한 속성입니다. background: linear-gradient(to right, #4466EE, #E99537); 이미지 파일이 전혀 없는 왼쪽에서 오른쪽 블렌드를 그립니다. radial-gradient() 그리고 conic-gradient() 원형 및 스윕 혼합에 대해 동일한 패턴을 따르십시오. 결과가 다운로드되지 않고 생성되기 때문에 어떤 크기에서도 선명하게 유지됩니다.

CSS 에서 그라디언트 텍스트를 어떻게 만들 수 있습니까?

그라데이션을 켜세요 background, 그런 다음 설정합니다 background-clip: text (와 함께 -webkit- safari의 접두사) 및 color: transparent, 그래서 문자는 단색 대신 그라데이션으로 채워집니다. 실제 텍스트를 이미지로 굽는 대신 마크업에 보관하여 화면 판독기가 선택하고 읽을 수 있도록 유지하세요.

감싸는 중

그라데이션은 네트워크 비용 제로를 위한 진정한 시각적 풍부함을 제공하는 몇 안 되는 CSS 기능 중 하나입니다. 이미지 요청 없음,종횡비 문제 없음,구성별 해상도 독립적입니다. 구문은 작습니다. 트랩은 구체적이고 알 수 있습니다: 각도 규칙,방사형 크기 키워드,sRGB 진흙,그라데이션 텍스트의 보이지 않는 방향 트랩도어.

당신이 그들을 볼 수있는 곳에 그들을 구축하십시오. The 그라데이션 생성기 는 무료이며 브라우저에서 완전히 실행되며 깨끗한 CSS 를 복사합니다. pair it with the 컬러 피커 대비를 유지하는 정지점의 경우 CSS 미니파이어 때 you're 인라인으로 할 준비가. 프론트 엔드 선반의 나머지 부분은에 개발자 생산성 도구 가이드.