텍스트에 linear-gradient 적용하기

그라데이션 효과가 적용된 텍스트

텍스트에 Linear-gradient 적용하기

텍스트에 그라데이션 효과를 주기 위해 linear-gradient를 사용하여 다음과 같이 스타일을 적용할 수 있습니다.

.gradient-text {
    display: inline-block;
    background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

1. display: inline-block;

텍스트 요소는 일반적으로 h1, p처럼 블록 요소이기 때문에 너비가 전체 화면을 차지합니다.

inline-block으로 변경해서 텍스트의 크기만큼만 너비를 차지하게 만들어줘서 그라데이션 효과가 텍스트에만 적용되게 합니다.

2. background-image

linear-gradient(90deg, #0ea5ea, #0bd1d1 51%)로 그라데이션을 지정합니다.

90도는 그라데이션이 왼쪽에서 오른쪽으로 적용된다는 의미이며, 첫 번째 색상이 51%까지 차지하고, 나머지 49%는 두 번째 색상으로 채워집니다.

3. -webkit-text-fill-color: transparent;

이 속성은 텍스트의 색을 투명하게 만드는 속성입니다.

텍스트 자체에 색상을 적용하는 대신, 배경의 그라데이션 색상을 텍스트에 입히기 위해 사용됩니다.

4. -webkit-background-clip: text;

이 속성은 배경 이미지를 텍스트에만 클립(잘라내기)하여 배경 이미지가 텍스트 부분에만 적용되도록 합니다.

5. background-clip: text;

-webkit- 접두사가 없는 background-clip: text;는 같은 기능을 하며, 다른 브라우저에서도 동일하게 그라데이션이 텍스트에 적용되도록 해줍니다.

이렇게 설정하면 텍스트에만 그라데이션이 적용된 스타일을 만들 수 있습니다.

버튼 그라데이션 효과와 호버 애니메이션

그라데이션이 적용된 버튼에 애니메이션 효과를 줄 때 다양한 방법이 있지만, background-size와 background-position을 사용하면 그라데이션이 이동하는 듯한 효과를 연출할 수 있습니다.

.gradient-btn {
    background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.5s ease;
}

.gradient-btn:hover {
    background-position: right;
}

1. background-image

linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea)는 첫 번째 색상인 #0ea5ea로 시작해서 51% 지점까지 적용됩니다.

그 이후로는 두 번째 색상인 #0bd1d1이 나타나고, 마지막에는 다시 첫 번째 색상 #0ea5ea가 나타납니다.

즉, 그라데이션이 대칭적으로 적용되어 양쪽 끝이 동일한 색상으로 마무리됩니다.

2. background-size

background-size: 200%는 배경 이미지의 크기를 200%로 늘려주어, 그라데이션이 더 크게 표현되고 배경이 움직일 수 있도록 공간을 확보해 줍니다. 이를 통해 애니메이션 시 배경이 자연스럽게 이동하는 효과를 줄 수 있습니다.

3. background-position

초기 배경 위치를 left로 설정하여 배경이 왼쪽에서 시작하도록 합니다.

4. hover 시

hover 상태에서는 background-position: right로 변경되어 배경이 오른쪽으로 이동합니다. 이로 인해 그라데이션이 움직이는 것처럼 보이는 시각적 효과가 나타납니다.