CSS Gradient Generator

Design a linear or radial gradient visually and copy the ready-to-use CSS code. Instant, up to 6 color stops.

3 free tries left for this tool todayStart free 3-day trial →

Type

Angle135°

Color Stops

100%

CSS Code

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Pick colors, drag stops, and adjust the angle to build the exact gradient you need — the CSS `background` code updates live and is ready to paste into your project. Also export as a PNG image.

자주 묻는 질문 (FAQ)

Can I use more than two colors?

Yes, up to 6 color stops. Add a stop, pick its color, and drag its position along the gradient.

Does the CSS code work in all browsers?

Yes. Linear and radial gradients using this syntax are supported in all modern browsers.

Can I export the gradient as an image instead of CSS?

Yes. The Download button exports a 1200×630px PNG of the current gradient — a common size for social media banners and blog covers.

추가 도구들이 번역 중입니다 — 영문 카탈로그에서 전체 도구를 확인하실 수 있습니다.

모든 도구 →