메시 그라디언트 생성기
여러 색이 부드럽게 섞이는 트렌디한 메시 그라디언트를 겹친 radial-gradient로 만들고 CSS를 복사하세요 — 100% 브라우저에서 처리, 업로드 없음
포인트 1
포인트 2
포인트 3
포인트 4
background: radial-gradient(at 20% 20%, #8b5cf6, transparent), radial-gradient(at 80% 15%, #ec4899, transparent), radial-gradient(at 25% 80%, #06b6d4, transparent), radial-gradient(at 75% 75%, #f59e0b, transparent), #1e1b4b;🔒 브라우저에서 실행되며 업로드되지 않습니다.
메시 그라디언트란?
메시 그라디언트는 표면의 여러 지점에 놓인 색을 부드럽게 섞어 만드는 배경 효과로, 요즘 앱과 웹사이트 배경에서 인기가 많습니다. 이 도구는 여러 개의 radial-gradient(at X% Y%, color, transparent) 블롭을 배경색 위에 겹쳐 하나의 background 속기형으로 만들어 이미지나 라이브러리 없이 순수 CSS로 재현합니다.
사용 방법
색상 포인트를 추가하고 각 포인트의 X·Y 위치를 드래그한 뒤 배경색을 고르거나 랜덤 생성을 눌러 보세요. 미리보기가 실시간으로 바뀌고 CSS를 바로 복사할 수 있습니다.
자주 묻는 질문
이미지 없이 진짜 CSS인가요?
네. 겹쳐진 radial-gradient로 만든 하나의 background 속기형이라 어떤 크기에서도 선명하고 네트워크 요청이 전혀 없습니다.
CSS는 어디에 붙여넣나요?
선언을 복사해 히어로 섹션, 카드, 페이지 본문 등 어떤 요소의 배경으로도 넣으세요. 그라디언트가 보이도록 요소에 높이를 지정하세요.