Skip to content
Yunedia Tools

그라데이션 생성기

최대 4개의 색상 스톱으로 선형 및 방사형 CSS 그라데이션을 디자인하고 실시간으로 미리 보며 CSS를 복사할 수 있습니다.

Preview

Blend steps between the first and last stop

사용 방법

  1. Set each color stop. Use Add stop to grow the gradient to up to four colors.
  2. Switch between linear and radial, and set the direction with the angle slider for linear gradients.
  3. The CSS under the preview is ready to use; Copy CSS copies it with the background property included.
  4. Random gradient builds a fresh gradient from cryptographically secure random values.

참고 사항

Stops are placed at even intervals automatically (0% and 100% for two stops; 0%, 50% and 100% for three). The blend strip below the preview interpolates the first and last colors in RGB space across ten steps, so you can judge how smooth the transition is. All processing happens in your browser.

자주 묻는 질문

Which direction is 0 degrees?
In CSS linear-gradient, 0deg points upward (bottom to top), 90deg points right and 180deg points down. The angle here follows the CSS specification exactly.