Softonic

그라데이션 배경화면 생성기

단계 1 / 3
다음

강한 흐림 효과를 준 3색 그라데이션은 지난 4년간 출시된 거의 모든 SaaS 랜딩 페이지와 대부분의 데스크톱 배경화면에서 쓰이는 배경 스타일입니다. 이 도구는 세 가지 HEX 색상을 조절 가능한 각도와 가우시안 흐림으로 섞어, 데스크톱, 스마트폰 또는 Zoom 배경 해상도로 내보냅니다.

그라데이션 배경화면 만드는 방법

  1. 1

    세 가지 색상 선택

    HEX 값을 직접 조정하거나 ‘무작위’를 클릭해 예상치 못한 팔레트를 얻어 보세요.

  2. 2

    각도 설정

    0~360°. 135°는 ‘노을’ 대각선 혼합, 90°는 ‘일출’ 방향의 가로 혼합입니다.

  3. 3

    흐림 조정

    흐림을 강하게 할수록 색상 간 경계가 감춰지고 캔버스 전체가 매끄러워집니다.

  4. 4

    이미지 내보내기

    디스플레이나 휴대폰 해상도에 맞춰 다운로드하세요.

권장 출력 크기

용도 해상도
4K 데스크톱 3840 × 2160
1440p 데스크톱 2560 × 1440
1080p 데스크톱 1920 × 1080
iPhone 15/16 1179 × 2556
Android(최신) 1080 × 2400
Zoom 가상 배경 1920 × 1080

언제나 잘 어울리는 팔레트 힌트

  • 보색 조합 + 중성색: 파랑, 주황, 베이지.
  • 유사색 3색: 색상환에서 60° 이내에 있는 세 가지 색조를 고르세요, 보라, 마젠타, 분홍.
  • 따뜻한 색과 차가운 색의 대비: 따뜻한 색 하나(피치, 빨강), 차가운 색 하나(청록, 네이비), 중성색 하나(크림).
  • 모노크롬: 하나의 색조를 세 가지 명도로 사용하면 차분하고 통일감 있는 배경이 됩니다.

흐림이 중요한 이유

흐림이 없는 3색 그라데이션은 색이 바뀌는 지점에 뚜렷한 경계(이른바 ‘무지개 효과’)가 나타납니다. 큰 캔버스에 60~100px의 filter: blur()를 적용하면 경계가 부드럽게 녹아들어 macOS Big Sur나 iOS 16 배경화면을 연상시키는 은은한 그라데이션이 됩니다.

실시간 CSS 미리보기

background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);

흐림 없이 선명한 그라데이션을 원한다면 필터 값을 0으로 낮추고, 시각적으로 균일한 혼합을 얻기 위해 in oklch 보간으로 전환하는 것을 고려해 보세요.

자주 묻는 질문

그렇지 않습니다. 이 생성기는 출력보다 큰 캔버스에 그라데이션을 그린 다음 흐림을 적용하고 내부적으로 최종 크기로 잘라내므로, 가장자리 픽셀이 투명해지지 않습니다. 흐림 수준과 관계없이 다운로드한 배경화면의 가장자리는 깔끔하게 유지됩니다.

이 생성기는 세 가지 색상을 사용합니다. 색이 많아지면 화면 보호기처럼 느껴지기 쉬운데, 차분한 배경화면에는 세 가지가 가장 알맞습니다.

정확히 같지는 않습니다. 휴대폰은 데스크톱보다 화면 비율이 세로로 길어서 대각선 각도가 다르게 보입니다. 각 대상 크기에서 미리 보고, 어색해 보이면 각도를 조정하세요.

아니요. 캔버스는 사용자의 기기에서 그려지며, 브라우저 밖으로 나가는 것은 직접 실행한 다운로드뿐입니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

XSD 검증기

XML 문서를 XSD 스키마에 대해 검증하고, 요소와 타입 불일치를 정확한 줄 번호와 함께 보고합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

이 도구는 다른 언어로도 제공됩니다