← 돌아가기

그라데이션 생성기

원하는 색으로 CSS 그라데이션을 만들고 코드를 복사하세요

그라데이션 종류
색상 스톱
프리셋
CSS 

    


    
    

  
  

    

      
바로 붙여넣는 그라데이션

      
필요한 만큼 색을 추가하고 각 색의 위치를 슬라이더로 조절한 뒤, 원하는 각도의 선형 그라데이션과 원형 그라데이션 중에서 고르세요. 조작하는 대로 미리보기가 갱신되고, 아래 CSS는 지금 그려지고 있는 값 그대로라 복사한 코드와 화면이 어긋나지 않습니다. 모든 처리는 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.

    


    

      

        
🧩 이럴 때 좋아요

        
    
          
  • 웹사이트 히어로 영역, 카드, 버튼 배경을 디자인할 때
    • 
          
  • 디자인 시스템에 반영하기 전에 색 조합을 먼저 확인하고 싶을 때
    • 
          
  • 발표 자료, 썸네일, SNS 이미지의 배경을 만들 때
    • 
          
  • CSS 문법을 찾아보지 않고 올바른 그라데이션 코드를 얻고 싶을 때
    • 
        

      

      

        
📋 사용 방법

        
    
          
  1. 프리셋을 눌러 시작하거나, 기본으로 놓인 두 색을 바로 수정하세요
    2. 
          
  2. 스톱을 추가해 색을 늘리고 슬라이더로 각 색의 위치를 정하세요
    3. 
          
  3. 원형으로 바꾸거나, 선형을 유지한 채 원하는 각도를 지정하세요
    4. 
          
  4. "CSS 복사"를 눌러 스타일시트에 그대로 붙여넣으세요
    5. 
        

      

    


    

      
자주 묻는 질문

      

        선형(linear)과 원형(radial) 그라데이션은 뭐가 다른가요?
        
선형 그라데이션은 직선 방향을 따라 색이 섞이고, 각도가 그 방향을 정합니다 — 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 흐릅니다. 원형 그라데이션은 중심에서 바깥으로 원을 그리며 번지므로 첫 색이 가운데, 마지막 색이 가장자리에 놓입니다.

      

      

        복사한 CSS가 모든 브라우저에서 동작하나요?
        
네. 접두사 없는 linear-gradient()와 radial-gradient()는 현재 쓰이는 모든 브라우저가 오래전부터 지원하므로, 벤더 접두사 없이 그대로 붙여넣으면 됩니다.

      

      

        색은 몇 개까지 쓸 수 있나요?
        
스톱 2개부터 8개까지 사용할 수 있습니다. CSS 자체에는 개수 제한이 없지만 색이 지나치게 많으면 부드럽기보다 탁해 보이는 경우가 많아, 다루기 좋은 범위로 제한했습니다.

      

      

        고른 색이 저장되거나 어딘가로 전송되나요?
        
아니요. 그라데이션은 전적으로 브라우저 안에서 만들어지고 미리보기까지 끝나며, 서버로 전송하거나 따로 저장하지 않습니다 — 페이지를 새로 고치면 기본 그라데이션으로 돌아옵니다.