CSS gradient generator
Live preview · linear·radial · angle control · muddiness compared · copy CSS
그라데이션 만들기
배경용 그라데이션을 보면서 만들고 CSS 를 가져갑니다. 가운데가 탁해지지 않게 섞습니다
시작 색
끝 색
방향 135°
모양
비교 — 위가 그냥 섞기, 아래가 눈에 맞춘 섞기
가운데가 #989081 → #b891b5 로 달라집니다. 그냥 섞으면 그만큼 탁해집니다.
Build a background gradient while watching it and take the CSS with you. Colors are mixed so the middle does not go muddy.
How to use it
- Type the start and end colours
- Choose the direction and shape
- Compare the two strips to see the muddiness
- Copy the CSS and paste it in
Common questions
- What is “keep the middle from going dead”?
- Blend two colours naively and the middle goes muddy — blue to yellow passing through grey is the classic case. Screen colour values are not proportional to perceived brightness; take that distortion out before blending and it does not happen. The comparison strip shows both side by side.
- When should I turn on “smooth it with more stops”?
- On a large background, where it makes the banding less visible. It works by inserting extra intermediate colours, so the CSS gets longer.
- Where do I paste the copied CSS?
- As that element’s background. The copied value already includes background:.
Other tools
Stays on your device What you enter is handled inside your browser only — nothing is stored or sent anywhere.
This tool page states where what you enter goes — see the badge above. All tools · KarmoLab · Who made this · Built with AI. View source