KOEN

메쉬 그라디언트 생성기

MESH · GRADIENT

색 점 4~8개를 드래그해 부드러운 메쉬 그라디언트를 만들고, radial-gradient를 겹친 CSS와 원하는 해상도의 PNG로 저장해요.

점을 드래그해서 옮기고, 빈 곳을 더블클릭하면 점이 추가돼요. 점을 선택한 뒤 방향키로 1%씩(Shift는 5%) 움직일 수 있어요.

CSS · 1920×1080 기준 

      

    


    
  










  

    

      HOW TO
      
사용 방법

      
    
      
  1. 미리보기의 색 점을 드래그해 옮기고, 빈 곳을 더블클릭하거나 '+ 추가'로 점을 늘려요(4~8개).
    2. 
      
  2. 점을 선택해 색(컬러 피커·HEX)과 퍼짐을 바꾸고, 바탕색·부드러움·블러로 전체 느낌을 조절해요. 팔레트 6종이나 '랜덤'으로 시작해도 돼요.
    3. 
      
  3. 크기 프리셋을 고르거나 W×H(최대 8192px)를 입력하면 미리보기 비율이 맞춰지고, 'PNG 저장'으로 그 해상도의 이미지를 받아요.
    4. 
      
  4. 'CSS 복사'로 radial-gradient를 여러 겹 쌓은 코드를 복사해 .mesh 요소에 붙여넣어요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
미리보기와 CSS, PNG 결과가 똑같나요?
세 가지 모두 같은 타원형 radial-gradient와 같은 색 정지점으로 그려서 같은 모습이에요. 다만 블러 값은 지정한 W×H 기준 px라서, 그보다 훨씬 작은 요소에 CSS를 쓰면 블러가 상대적으로 강해 보일 수 있어요.

    
블러를 켜면 CSS 코드가 왜 달라지나요?
요소에 filter: blur()를 바로 걸면 가장자리가 투명하게 번지기 때문에, ::before 가상 요소에 그라디언트와 블러를 넣고 살짝 확대(scale)해 가장자리를 채워요. 부모에는 overflow: hidden과 isolation: isolate가 들어가서 안쪽 글자에는 블러가 걸리지 않아요.

    
4K나 아이폰 배경화면 크기로 저장할 수 있나요?
4K(3840×2160), 아이폰 배경(1290×2796) 등 프리셋이 있고 최대 8192×8192px까지 입력할 수 있어요. 다만 iPhone·iPad 사파리는 약 1,670만 화소(예: 4096×4096)를 넘는 이미지를 만들지 못할 수 있어 큰 이미지는 PC 브라우저를 권장해요.

    
점 위치를 정밀하게 맞출 수 있나요?
점을 선택한 뒤 방향키로 1%씩, Shift+방향키로 5%씩 움직이고 Delete 키로 지울 수 있어요. 작업 상태는 이 브라우저에 자동으로 저장돼서 다시 열어도 이어서 할 수 있어요.