본문 바로가기
프론트엔드 HTML CSS JAVASCRIPT

[HTML, CSS] linear-gradient 그라데이션 효과 / 텍스트에 그라데이션 적용하는 법

by jaewooojung 2019. 7. 30.

HTML CSS
텍스트 그라데이션


Linear gradient

linear-gradient는 CSS 속성 중 하나로, 웹 페이지의 요소에 선형 그라데이션 배경을 적용할 때 사용됩니다. 그라데이션 배경을 적용하면 두 개 이상의 색상이 서로 부드럽게 전환되면서 매력적인 디자인 효과를 만들 수 있습니다.

웹 디자인에서 그라데이션은 단순한 색상 전환 이상의 중요한 역할을 합니다. 그라데이션만 적절히 잘 활용해도 사용자의 주의를 끌거나 특정 요소를 강조하는 등 UI/UX 향상에 큰 도움을 줄 수 있습니다. 또한, 그라디언트는 웹 페이지에 깊이와 질감을 더해, 더욱 동적인 느낌과 생동감을 더해줍니다.

 

 

그라데이션 / 그라디언트 용어 차이

그라데이션인지적 관점에서의 용어로, 색이 점진적으로 변화하는 현상을 의미합니다.
그라디언트기술적 관점에서의 용어로, 그라데이션을 구현하는 방법이나 기술을 의미합니다.

 

 

기본 사용법

linear-gradient를 사용하기 위해서는 요소에 해당 css 속성을 부여하면 됩니다.

<div class="gradient-background"></div>
.gradient-background {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}
  • direction은 그라디언트의 방향을 나타내며, 생략 가능합니다. 기본값은 to bottom입니다.
  • color-stop은 그라디언트의 각 지점에서 변화할 색상을 나타냅니다.

 

예시

.gradient-background {
  background: linear-gradient(to right, red, yellow);
}

 

기본 그라디언트

빨간색(red)으로 시작해서 노란색으로 끝나는 그라데이션

 


다양한 색상 사용법

세 가지 이상의 색상을 사용할 수 있습니다.

색상은 쉼표로 구분하며, 각 색상은 그라디언트의 시작점과 끝점을 나타냅니다.

.gradient-background {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

이 코드는 빨간색에서 보라색까지 무지개 색상을 그라디언트로 만듭니다.

다양한 색상 그라디언트

 

 

방향 조절

linear-gradient의 첫 번째 인자는 방향을 지정합니다.

기본값은 to bottom이며, 그라디언트가 상단에서 시작해서 하단으로 진행됩니다. to right, to left, to top 등으로 방향을 지정할 수도 있고, 아래와 같이 각도를 사용해서 더 정밀하게 방향을 조절할 수도 있습니다.

.gradient-background {
  background: linear-gradient(45deg, red, blue);
}

45도 그라디언트

45도 각도로 빨간색에서 파란색으로 변하는 그라디언트를 생성합니다.

 

 

좀 더 복잡한 형태의 그라디언트도 가능합니다.

여러 색상과 정지점 사용

여러 색상을 각각 원하는 정지점에서 제어하여 더 정교하고 복잡한 그라디언트 패턴을 만들 수 있습니다.

.gradient-background {
  background: linear-gradient(to right, red, orange 30%, yellow 50%, green 70%, blue);
}

여러 색상, 여러 정지점

빨간색에서 파란색으로 변하는 그라디언트를 만들면서 오렌지, 노란색, 녹색의 정지점을 각각 30%, 50%, 70%에 배치했습니다.

 

 

반복되는 그라디언트

repeating-linear-gradient를 사용하면 반복되는 그라디언트 패턴도 만들 수 있습니다.

특히 줄무늬(스트라이프) 또는 규칙적인 패턴을 만드는 데 유용합니다.

.gradient-background {
  background: repeating-linear-gradient(
    to right,
    white,
    white 10px,
    black 10px,
    black 20px
  );
}

반복 그라디언

45도 각도로 흰색과 검은색 스트라이프가 10픽셀 간격으로 반복되는 패턴을 생성합니다.

 

 

텍스트 그라디언트

글자에 그라디언트 효과를 적용하면 독특한 타이포그래피를 만들 수 있습니다.

<div class="gradient-text">그라데이션</div>
.gradient-text {
  width: fit-content;
  font-size: 100px;
  background: linear-gradient(to right, red, blue);
  color: transparent;
  -webkit-background-clip: text;
}

 

배경을 linear-gradient로 설정하고 color를 투명(transparent)으로 설정하였습니다. 마지막으로 -webkit-background-clip 속성을 text로 설정하면 배경의 gradient를 문자열에 그대로 적용할 수 있습니다.

글자에 그라데이션

 

단, 여기서 요소의 넓이(width)는 글자의 길이에 딱 맞도록 조절하셔야 합니다.

div의 경우에는 따로 넓이를 지정하지 않으면 자리를 차지할 수 있는 최대한으로 넓이가 확장됩니다. 따라서 글자의 색상이 전부 그라디언트의 시작 색상인 빨간색으로 보여질 가능성이 높습니다.

넓이 조절이 어렵다면 span과 같이 요소의 내용에 크기가 자동으로 맞춰지는 요소를 사용하는 방법도 있습니다.



        
답변을 생성하고 있어요.