0xdump

CSS Tools

Gradient Generator

Build linear, radial, and conic gradients with live CSS output.

Live tool

Build a gradient visually

Color stops

Use between 2 and 5 stops.

Preview

Current gradient

Use the output below for backgrounds, cards, hero sections, and experimental UI accents.

Generated CSS

Ready to paste

background: linear-gradient(90deg, #ff7a18 0%, #ff3f81 52%, #5b4bff 100%);

What this tool does

It helps you build CSS gradients without repeatedly hand-editing percentage stops and angle values.

The generator supports linear, radial, and conic gradients. Every change updates the preview immediately and outputs a production-ready CSS declaration you can copy into your stylesheet or component.

How to use

A quick path from an empty preset to usable CSS.

  1. Pick a preset or start from the default linear gradient.
  2. Switch the gradient type depending on the effect you want.
  3. Adjust the angle for linear and conic gradients.
  4. Fine-tune stop colors and percentages until the preview matches the look you want.
  5. Copy the generated CSS and drop it into your stylesheet.

Example gradients

Preset starting points you can reuse or adapt.

Sunset Wire

A warm linear gradient that feels like city lights hitting glass.

  • Type: linear
  • Stops: 3
  • Angle: 90deg

Signal Bloom

A radial spread for cards, badges, and hero accents.

  • Type: radial
  • Stops: 3
  • Angle: 0deg

Arc Reactor

A conic mix with more movement for backgrounds and loaders.

  • Type: conic
  • Stops: 4
  • Angle: 135deg

FAQ

Common questions that come up when using CSS gradients in production.

When should I use radial or conic gradients instead of linear gradients?

Use radial gradients when the color needs to radiate outward from a point, and conic gradients when the color needs to sweep around a center. Linear gradients are best when the movement is directional.

Can I use the copied CSS in inline styles?

Yes. The generator outputs a single `background:` declaration, so you can use it inside a stylesheet, CSS module, or inline style object after adjusting syntax for your framework.

Why do some gradients look harsh even with good colors?

The stop positions matter as much as the colors. Small changes in percentage placement can make a gradient feel much smoother or much more abrupt.

Related Tools

Keep exploring

Box Shadow Generator

Live

Tune offset, blur, spread, and inset values for cleaner elevation.

Open tool

Border Radius Generator

Live

Shape corners visually and export precise border-radius values.

Open tool

Glassmorphism Generator

Live

Create frosted-glass card styles with blur, border, and shadow controls.

Open tool