CSS Gradient 생성기
「CSS Gradient 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
사용 방법
사용 방법
- Choose a linear or radial gradient.
- Adjust each color and its 0–100% position, then add stops when needed.
- Inspect the live preview and copy the CSS background declaration.
Ordered color stops
Stops are sorted from 0% through 100% every time you adjust a position. If two stops share a position, their current order is retained, which creates a deliberate hard edge between their colors.
Linear and radial controls
Linear gradients use a degree angle. Radial gradients use a circle or ellipse shape. The generated CSS uses ordinary linear-gradient() and radial-gradient() functions supported by modern browsers.
Preview locally, then copy
The preview uses your browser’s CSS renderer and updates as you change a control. No color or CSS value leaves the page. Use two stops for a simple blend or up to six for a more layered background.
자주 묻는 질문
더 알아보기
Why did a color stop move?
The editor sorts stops by their percentage so the generated CSS is easy to read. Stops with equal positions keep their current order.
How can I create a sharp transition?
Give two neighboring colors the same position. CSS switches directly from the first color to the next at that point.
What does the linear angle mean?
0deg points upward, 90deg points right, 180deg points down, and 270deg points left.
Does the tool upload colors or CSS?
No. It creates the preview and copied declaration locally in your browser.