CSS 그라데이션 생성기

색상과 각도를 조절해 원하는 그라데이션을 만들고, CSS 코드를 바로 복사해보세요.

CSS 코드

linear-gradient는 어떻게 동작하나요?

CSS의 linear-gradient() 함수는 지정한 각도를 따라 두 개 이상의 색상을 부드럽게 섞어주는 배경 효과입니다. 웹 디자인에서 버튼, 배너, 배경 등 다양한 곳에 입체감과 세련된 느낌을 더할 때 널리 활용됩니다.

색상 팔레트가 더 필요하다면

그라데이션에 어울리는 색 조합이 궁금하다면 색상 팔레트 생성기도 확인해보세요.

자주 묻는 질문

색상을 3개 이상 넣을 수도 있나요?

이 생성기는 2가지 색상 기준으로 만들어졌지만, 생성된 코드에 쉼표로 색상을 추가하면 얼마든지 더 많은 색을 이어 붙일 수 있습니다.

원형 그라데이션(radial-gradient)도 지원하나요?

이 생성기는 방향성이 있는 linear-gradient에 특화되어 있으며, 원형 그라데이션이 필요하다면 생성된 코드의 함수명을 radial-gradient로 바꿔 활용할 수 있습니다.