[css] 그라데이션 폰트 만들기

Gradient란?

그라데이션(Gradient)은 CSS를 사용하여 요소에 부드러운 색상 변화를 적용하는 기술입니다. CSS 그라데이션은 다양한 색상을 블렌딩하여 그라데이션 효과를 만들어냅니다.

 

1. 선형 그라데이션(Linear Gradient)

선형 그라데이션은 한 쪽 끝에서 다른 쪽 끝으로 색상이 서서히 변하는 효과를 만듭니다. 이는 linear-gradient() 함수를 사용하여 정의할 수 있습니다. 함수의 매개변수로는 그라디언트의 방향과 사용할 색상들을 지정합니다.

/* 위에서 아래로 그라데이션 */
background: linear-gradient(to bottom, red, blue);

/* 45도 각도로 그라데이션 */
background: linear-gradient(45deg, red, blue);

/* 가로로 그라데이션 */
background: linear-gradient(to right, red, blue);

 

[예시]

    .gradient-box {
        width: 300px;
        height: 150px;
        background: linear-gradient(45deg, #FC4100, #F3CA52, #03AED2); /* 3색 그라데이션 */
        text-align: center;
        line-height: 150px; /* 세로 가운데 정렬 */
    }

Linear Gradient

2. 원형 그라데이션(Radial Gradient)

원형 그라데이션은 중심에서 외부로 향하는 방향으로 색상이 서서히 변하는 효과를 만듭니다. 이는 radial-gradient() 함수를 사용하여 정의할 수 있습니다. 함수의 매개변수로는 그라디언트의 중심, 시작 반지름, 끝 반지름, 사용할 색상들을 지정합니다.

/* 중심을 기준으로 외부로 그라데이션 */
background: radial-gradient(circle, red, blue);

/* 타원형 그라데이션 */
background: radial-gradient(ellipse, red, blue);

 

[예시]

.gradient-box2 {
        width: 300px;
        height: 150px;
        background: Radial-gradient(circle, #FC4100, #F3CA52, #03AED2); /* 3색 그라데이션 */
        text-align: center;
        line-height: 150px; /* 세로 가운데 정렬 */
    }

Radial Gradient

3. 그라데이션 글자 (폰트) 만들기

아래 CSS는 배경에 3색 그라데이션을 만들고, -webkit-background-clip 속성을 사용하여 텍스트에만 그라데이션 효과가 적용되도록 합니다. 또한 텍스트의 색상을 투명하게 설정하여 텍스트가 투명한 배경 위에 나타나도록 합니다.

.transparent-text {
    background: linear-gradient(45deg, #FC4100, #F3CA52, #03AED2); /* 색1에서 색3까지의 45도 그라데이션 */
    -webkit-background-clip: text; /* 텍스트만 그라데이션 효과가 적용되도록 지정 */
    color: transparent; /* 텍스트를 투명하게 함 */
    font-size: 24px;  /* 텍스트 크기 */
    font-weight: 700;  /* 텍스트 굵기 */
}

그리고 HTML에서는 다음과 같이 클래스를 적용하여 텍스트를 만들 수 있습니다.

<span class="transparent-text">
    Gradient Fonts
</span>

[결과]

Gradient Fonts