온라인 CSS 그라디언트 도구
CSS Gradient는 웹사이트에 대한 그라디언트 배경을 만들 수 있는 행복한 작은 웹사이트이자 무료 도구입니다.
CSS 그라디언트를 사용하면 두 개 이상의 지정된 색상 간에 부드러운 전환을 표시할 수 있습니다.
CSS는 두 가지 유형의 그라디언트를 정의합니다.
- 선형 그라데이션(아래/위/왼쪽/오른쪽/대각선으로 이동)
- 방사형 그라디언트(중심에 의해 정의됨)
CSS 선형 그라디언트
선형 그래디언트를 생성하려면 최소한 두 개의 색상 정지점을 정의해야 합니다. 색상 정지점은 부드러운 전환을 렌더링하려는 색상입니다. 그라데이션 효과와 함께 시작점과 방향(또는 각도)을 설정할 수도 있습니다.
통사론
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
