🌅CSS 그래디언트 생성기

linear·radial·conic의 차이

CSS 그래디언트에는 색이 변하는 방식이 다른 3가지 함수가 있으며, 모두 background 속성에 작성해 사용합니다.

• linear-gradient：linear-gradient는 지정한 각도의 직선을 따라 색이 변하는 선형 그래디언트입니다.
• radial-gradient：radial-gradient는 중심 위치에서 바깥쪽으로 향해 원 또는 타원 모양으로 색이 퍼지는 원형 그래디언트입니다.
• conic-gradient：conic-gradient는 중심 위치 주변을 시계 방향으로 한 바퀴 도는 동안 색이 변하는 부채꼴 그래디언트입니다.

각도와 방향 키워드의 대응

linear-gradient의 각도는 0deg가 아래에서 위로 향하는 방향이며, 숫자가 증가할수록 시계 방향으로 회전합니다. 각도는 'to right'와 같은 방향 키워드로도 작성할 수 있으며, 90deg는 'to right', 180deg는 'to bottom'과 같은 방향이 됩니다.

색 정지점과 투명도 작성법

색 정지점(컬러 스톱)은 그래디언트에서 그 색이 되는 위치를 뜻하며, 0%는 시작점, 100%는 끝점을 나타냅니다. 예를 들어 '#3B82F6 0%, #8B5CF6 100%'은 시작점의 파란색에서 끝점의 보라색으로 색이 변하는 지정입니다.

• #RRGGBB 형식：#RRGGBB 형식은 빨강·녹색·파랑의 강도를 2자리씩 16진수로 표현하는 색 작성법이며, #FF0000은 불투명한 빨강을 나타냅니다.
• rgba 형식：rgba 형식은 빨강·녹색·파랑의 값(0~255)에 투명도(0~1)를 더한 색 작성법이며, 투명도 0.5는 반투명 색을 나타냅니다.