CSS Gradient Generator

Design linear, radial, and conic CSS gradients with live preview

๐Ÿ”’ 100% ๋ธŒ๋ผ์šฐ์ € ๋‚ด๐Ÿ†“ ํ‰์ƒ ๋ฌด๋ฃŒโšก ๊ฐ€์ž… ์—†์Œ
์ฐธ๊ณ : ์•„๋ž˜ ํˆด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ํ˜„์žฌ ์˜์–ด๋กœ๋งŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. UI๋Š” ํ•˜๋‚˜์”ฉ ๋ฒˆ์—ญ ์ค‘์ž…๋‹ˆ๋‹ค. ์ด ํˆด์„ ์˜์–ด๋กœ ๋ณด๊ธฐ โ†’
0%
100%

์‚ฌ์šฉ๋ฒ•

  1. 1
    Pick a gradient type

    Linear, radial, or conic - the preview updates instantly.

  2. 2
    Add or move color stops

    Drag sliders to reposition, click + to add more stops, edit hex colors directly.

  3. 3
    Copy the CSS

    Grab a production-ready 'background: โ€ฆ' declaration.

CSS Gradient Generator ์†Œ๊ฐœ

Free online CSS gradient generator. Create linear, radial, or conic gradients with unlimited color stops, adjust angles with a live preview, and copy production-ready CSS. Runs entirely in your browser. 712 Tools์˜ CSS Gradient Generator์€ ์ตœ์‹  JavaScript API๋ฅผ ์‚ฌ์šฉํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ browser์—์„œ ์™„์ „ํžˆ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค - server๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ผ์ด ์ ˆ๋Œ€ ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ฆ‰๊ฐ์ ์ธ ๊ฒฐ๊ณผ, ์™„์ „ํ•œ ํ”„๋ผ์ด๋ฒ„์‹œ, ๊ทธ๋ฆฌ๊ณ  ์—…๋กœ๋“œ ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.

debugging ์„ธ์…˜, ๋น ๋ฅธ sanity check, ๋˜๋Š” ํ”„๋กœ๋•์…˜ ์ธ์‹œ๋˜ํŠธ - ์–ด๋–ค ์ƒํ™ฉ์ด๋“  ์ด ํˆด์€ ์›ํ•˜๋Š” ๋งŒํผ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›Œํ„ฐ๋งˆํฌ ์—†์Œ, ๊ฐ€์ž… ์—†์Œ, ํˆด ๋‚ด ๊ด‘๊ณ  ์—†์Œ.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

What browser support do these have?

linear- and radial-gradient work in every browser released after 2013. conic-gradient needs a browser from 2020 or later.

Can I use CSS variables in stops?

Yes, but this tool uses hex for the color picker. You can search-replace hex values with var(--your-token) in the copied CSS.

How do I add multiple gradients?

Chain them in a single background property, separated by commas. This tool builds one at a time - layer them in your own CSS.

๋” ์ฝ๊ธฐ

5 ๋ถ„ ์†Œ์š”

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

5 ๋ถ„ ์†Œ์š”

Tailwind to plain CSS: migration, extraction, and component patterns

You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.

4 ๋ถ„ ์†Œ์š”

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 ๋ถ„ ์†Œ์š”

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45ยฐ angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

๊ด€๋ จ ํˆด

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine