Skip to content
XUtilHub

CSS Gradient Generator – Linear, Radial & Conic Gradients

Create CSS gradients visually: linear, radial or conic, with up to 8 color stops, angle control and presets. Copy the CSS or Tailwind class.

  • Free, no sign-up
  • Runs in your browser, nothing uploaded

About the CSS Gradient Generator

Design a gradient background without writing code. Choose linear, radial or conic, add and drag color stops, set the angle, start from a preset, and copy CSS or a Tailwind class.

Key features

  • Linear, radial and conic
  • Up to 8 color stops
  • Angle and shape control
  • 8 ready-made presets
  • CSS with solid fallback
  • Tailwind arbitrary class

Make gradients without code

Gradients add depth to hero sections, buttons and cards. Choose a type, pick colors and drag the stops until it looks right, then copy the code.

Gradient types

TypeLooks likeCSS function
LinearColor changes along a straight linelinear-gradient()
RadialColor spreads out from a center pointradial-gradient()
ConicColor sweeps around a center, like a color wheelconic-gradient()

Angle cheat sheet

AngleDirection
0°Bottom to top
90°Left to right
180°Top to bottom
135°Top-left to bottom-right

Box shadow generator, color palette generator and CSS formatter.

How to use the CSS Gradient Generator

  1. Enter a color code, use the picker, or start from a preset.
  2. Adjust the options; the preview updates instantly.
  3. Check the result, including contrast and how it looks in context.
  4. Copy the CSS, Tailwind or HEX code, or download it.

Frequently asked questions

Do CSS gradients work in all browsers?

Linear and radial gradients work in every modern browser. Conic gradients work in all current versions of Chrome, Edge, Safari and Firefox. The CSS includes a solid color first as a fallback.

How do I use the gradient as a background?

Paste the CSS into the rule for your element, for example .hero { background: linear-gradient(…); }. In Tailwind, add the class to your element.

Can I make gradient text?

Yes. Use the gradient as the background, then add background-clip: text and color: transparent to the same element.

Why does my gradient look muddy in the middle?

Mixing opposite colors such as blue and yellow passes through gray. Add a brighter color stop in the middle to keep it vivid.

Are these design tools free?

Yes. Every tool is free with no sign-up, and you can use the colors and code in personal and commercial projects.

Do you upload my images?

No. The color blindness simulator and every other tool run entirely in your browser, so your images and colors stay on your device.

Which code formats can I copy?

HEX, RGB and HSL values, plain CSS, CSS variables, SCSS variables, and Tailwind classes or theme config for both Tailwind v3 and v4.

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text.

Last updated:

Related Design tools

Box Shadow GeneratorNEW

Create CSS box shadows visually with multiple layers, blur, spread, opacity and inset. Presets for soft, layered, glow and neumorphic shadows.

Color Shades GeneratorNEW

Turn one brand color into a full 50–950 shade scale like Tailwind's. Balanced OKLCH shades, exported for Tailwind v4, v3, CSS variables and SCSS.

Color Blindness SimulatorNEW

Upload an image to see how people with deuteranopia, protanopia, tritanopia and achromatopsia see it. Side by side, scientifically based, no upload.

Color Name FinderNEW

Find the name of any color from its HEX, RGB or HSL code. See the closest CSS color names and common names, plus a list of all 148 CSS colors.

Contrast CheckerNEW

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA, with a live preview and one-click fixes that pass.

Color Palette GeneratorNEW

Generate beautiful 5-color palettes: random, analogous, monochrome, complementary, triadic, pastel or earthy. Lock colors, press space, export CSS or PNG.