• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS CSS 그러데이션(Gradients) 정리

페이지 정보

profile_image
작성자 모던DS
조회 3회 작성일 26-02-26 03:40

본문

CSS 그러데이션(Gradients) 정리


CSS 그러데이션은 두 개 이상의 색상 사이에서 부드러운 전환 효과를 만들어내는 이미지 속성입니다. 

background-image 또는 background 속성에 할당하여 사용합니다.


1. 선형 그러데이션 (Linear Gradients)

직선을 따라 색상이 변하는 방식입니다.

  • 방향(Direction): 각도(예: 45deg)나 키워드(예: to right, to bottom left)로 설정합니다. 기본값은 to bottom입니다.

  • 색상 중지점(Color Stops): 색상이 바뀌는 지점을 지정합니다. 특정 위치(%, px)를 지정하지 않으면 균등하게 배분됩니다.


2. 방사형 그러데이션 (Radial Gradients)

중심점에서 시작하여 바깥쪽으로 타원 또는 원형으로 퍼지는 방식입니다.

  • 모양(Shape): circle(원형) 또는 ellipse(타원형, 기본값)를 설정할 수 있습니다.

  • 크기(Size): closest-side, farthest-corner 등을 통해 배경이 퍼지는 범위를 제어합니다.

  • 위치(Position): at center, at top left 등으로 중심점의 위치를 바꿀 수 있습니다.


3. 원추형 그러데이션 (Conic Gradients)

중심점을 기준으로 시계 방향으로 회전하며 색상이 변하는 방식입니다. (파이 차트나 색상표 구현 시 유용)

  • 시작 각도: from 90deg와 같이 시작점을 정할 수 있습니다.

  • 중심점: at 50% 50%와 같이 회전 축의 위치를 정할 수 있습니다.


f6da24a1423ab7b19980bdad13955e9a_1772045176_977.png

 
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS 그러데이션 연습</title>
    <style>
        .box {
            width: 100%;
            height: 150px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            border-radius: 10px;
        }

        /* 1. 선형 그러데이션: 방향과 색상만 기억하세요 */
        .linear-basic {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
        }

        /* 2. 각도 조절: deg 단위를 사용합니다 */
        .linear-angle {
            background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
        }

        /* 3. 방사형 그러데이션: 중심에서 퍼져나갑니다 */
        .radial-basic {
            background: radial-gradient(circle, #00b4db, #0083b0);
        }

        /* 4. 글자 그러데이션: 이 3줄이 세트입니다 */
        .text-gradient {
            font-size: 3rem;
            font-weight: 900;
            background: linear-gradient(to right, #8e2de2, #4a00e0);
            -webkit-background-clip: text; /* 배경을 글자 모양으로 자름 */
            color: transparent;            /* 글자색을 투명하게 */
        }
    </style>
</head>
<body>

    <h2>1. 가로 방향 선형 (to right)</h2>
    <div class="box linear-basic">linear-gradient</div>

    <h2>2. 45도 대각선 방향 (45deg)</h2>
    <div class="box linear-angle">45deg Gradient</div>

    <h2>3. 원형 방사형 (circle)</h2>
    <div class="box radial-basic">Radial Gradient</div>

    <h2>4. 응용: 글자 그러데이션</h2>
    <h1 class="text-gradient">TEXT GRADIENT</h1>

</body>
</html>

[원형 그러데이션]
f6da24a1423ab7b19980bdad13955e9a_1772045498_8275.png

CSS
    #div1{
      background:darkgreen;
      background:radial-gradient(circle closest-side at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
    }
    #div2{
      background:darkgreen;
      background:radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
    }
    #div3{
      background:darkgreen;
      background:radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
    }
    #div4{
      background:darkgreen;
      background:radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
    }