WebHerramientas

Gradient Generator

Create beautiful custom CSS gradients

Colour stops · drag the handles or click the bar to add

Gradient Type

Preset Gradients

CSS

background: linear-gradient(135deg, #141c2e 0%, #ffc21a 100%);

Tailwind

bg-[linear-gradient(135deg,_#141c2e_0%,_#ffc21a_100%)]

Share this tool

If it helped, send it to someone who needs it too.

Keep going with

More in Design

About Ads

This site uses Google AdSense to display ads. These ads help us keep WebHerramientas completely free. Ads are managed by Google and meet strict security and privacy standards.

Advertising
Loading ad...

Ads help us keep WebHerramientas free for everyone

Free Online Gradient Generator

Create CSS gradients visually, choosing between a linear, radial or conic gradient, adjusting the angle and colors, or starting from a ready-made preset. The gradient's CSS code is generated automatically and you can copy it with one click to use straight in your project.

Why use Gradient Generator

  • 3 gradient types: linear, radial and conic
  • Adjustable angle for linear gradients
  • Popular gradient presets ready to use
  • Generates the CSS code automatically as you adjust colors
  • Copy the CSS with one click, free and no sign-up

How to use it in 3 steps

  1. 1

    Choose a gradient type

    Select linear, radial or conic.

  2. 2

    Adjust colors and angle

    Customize the colors and angle, or choose a preset.

  3. 3

    Copy the CSS code

    Copy the generated CSS to use in your project.

Questions about Gradient Generator

What gradient types can I create?

Linear (a straight line with adjustable angle), radial (from a center point outward) and conic (rotating around a point).

How do I use the generated CSS in my project?

Copy the code with the copy button and paste it as the value of the background or background-image property in your stylesheet.

Can I use more than two colors in the gradient?

It depends on the type and preset chosen; several presets include multiple color stops for more complex gradients.

Do I need to know CSS to use this tool?

No, you adjust everything visually and the tool generates the matching CSS code automatically.

Is Gradient Generator free?

Yes, Gradient Generator from WebHerramientas is 100% free. No registration or subscription required. You can use it as many times as you need at no cost.

Is it safe to use Gradient Generator online?

Yes, all information is processed directly in your browser. We do not store or send your data to any external server.

Does Gradient Generator work on mobile?

Yes, the tool is fully responsive and works on any device: phone, tablet or computer with a modern browser.