Gradient Generator

From ToolzPedia, the free tools encyclopedia
This is one of several design tools. For the full list of utilities, see All tools.

CSS gradients are one of the most versatile and underused design tools available to web developers. A well-crafted gradient can replace decorative images entirely, reducing page weight while giving headers, cards, buttons, and backgrounds more depth and visual interest than flat colours. The challenge has always been the syntax: a three-stop radial gradient with custom angles and positions is hard to write by hand without a visual reference.

The ToolzPedia Gradient Generator provides that visual reference. It supports linear, radial, and conic gradients, lets you add as many colour stops as you need, and outputs ready-to-paste CSS code that works in every modern browser. The preview updates live as you drag stops, adjust angles, and change colours, so you can iterate visually and copy the final result with one click.

All processing happens in your browser with no dependencies on external servers or services. The generator works offline after the initial page load and produces clean, standards-compliant CSS output without vendor prefixes (modern browsers no longer need them for basic gradients).

Use the tool edit

Type
Angle: 135°
Color Stops
CSS Output
Presets

How to use Gradient Generator edit

Follow these steps to use the tool:

  1. Choose gradient type

    Pick linear, radial or conic gradient.

  2. Add color stops

    Change the colors and positions. Add more stops for complex multi-color gradients.

  3. Adjust angle

    Drag the angle slider for linear and conic gradients.

  4. Copy CSS

    Copy the ready-to-use CSS code and paste it directly into your stylesheet.

Frequently asked questions edit

A linear gradient transitions colours along a straight line at a specified angle. A radial gradient radiates outward from a centre point in concentric ellipses or circles. A conic gradient sweeps colours around a centre point like the hands of a clock. Each type suits different use cases: linear for backgrounds and dividers, radial for spotlight and glow effects, conic for circular UI elements and decorative patterns.
Yes. Linear and radial gradients have been universally supported across all major browsers for over a decade. Conic gradients have been supported in Chrome, Firefox, Safari, and Edge since 2021 and cover well over 95% of users. Vendor prefixes (-webkit-) are no longer needed for any of the three gradient types in modern browsers.
Yes, and this is exactly how they work. The CSS property is background-image: linear-gradient(...), or you can use the shorthand background: linear-gradient(...). Because they are treated as images, you can layer multiple gradients using comma separation: background: linear-gradient(...), radial-gradient(...).
Use transparent as a colour stop. Modern browsers also support rgba(0,0,0,0) or hsla(0,0%,0%,0). For a fade-out effect from a solid colour to transparent, end your gradient with transparent or rgba(R,G,B,0) matching the red, green, blue values of your solid colour.
Gradients themselves cannot be transitioned or animated in CSS because they are rendered as images. The workaround is to animate the background-position on a larger gradient background, creating a shimmer or slide effect. Alternatively, you can animate opacity on a gradient overlay element. JavaScript-based gradient animation is also possible by updating CSS custom properties on each animation frame.
repeating-linear-gradient repeats the gradient pattern at defined intervals, creating stripes, candy-cane patterns, and other repeating visual effects. It takes the same parameters as linear-gradient but tiles the stop pattern instead of stretching it to fill the element.

Use cases edit

Hero section backgrounds

Gradient backgrounds on hero sections and page headers are among the most effective uses of CSS gradients. A linear gradient from a brand colour to a complementary shade creates depth without requiring a full-width background image.

Button and CTA styling

Gradient fills on primary buttons give them a three-dimensional quality that flat colours lack. A subtle vertical gradient from a slightly lighter to slightly darker shade of the brand colour is a commonly used pattern.

Card and section dividers

Radial gradients placed at the corner or centre of a card container create a subtle glow effect. Conic gradients produce colour wheels and pie-chart-style decorative elements.

Text gradients

CSS background-clip: text with a gradient background produces multi-colour gradient text that is natively rendered by the browser. The generator outputs the gradient you need; applying it to text requires adding background-clip: text and -webkit-text-fill-color: transparent in your CSS.

Loading skeleton screens

Animated gradients are used in skeleton screens to simulate loading content. Generate the base gradient here and then add a CSS animation to move it across the element.

How it works edit

CSS linear gradients are rendered by the browser along a directional axis defined by an angle (0deg points upward, 90deg points right). Colour stops are positioned along that axis as percentages or absolute lengths. The browser interpolates colours between stops in the sRGB colour space by default. The generator translates your visual choices (stop colours, stop positions, gradient angle) directly into the CSS syntax: linear-gradient(90deg, #color1 0%, #color2 100%).

Radial gradients radiate outward from a centre point. The generator supports the default elliptical shape that matches the container aspect ratio, as well as circular shapes. The position of the centre can be adjusted as a percentage of the container dimensions.

Conic gradients sweep around a centre point in a circular arc. They are defined by an angle and position, and colour stops are specified as angles or percentages of the full 360-degree sweep. Conic gradients are the least well-known of the three types, but they produce pie-chart, colour-wheel, and angular pattern effects that are impossible with linear or radial gradients.

Tips and best practices edit

  • For smooth, natural-looking gradients, avoid stops that are too close together unless you are trying to create a hard colour band. Two or three widely-spaced stops usually look more elegant than five tightly-packed ones.
  • Adding a semi-transparent stop (using rgba or hsla colour values) at the end of a gradient that fades to transparent creates a soft-edge effect on backgrounds and overlays without needing an image mask.
  • Use the angle control to experiment with diagonal gradients. A 135-degree linear gradient produces a popular top-left to bottom-right diagonal that feels more dynamic than a purely vertical or horizontal gradient.
  • When creating gradients for dark mode, use stops with lower lightness values and consider slight hue shifts rather than just darkening the same colours, because dark gradients that shift slightly toward blue or purple feel more sophisticated than those that go straight to near-black.
  • Copy the CSS output and paste it directly into your browser's DevTools on the element you are styling to see the gradient in context before adding it to your stylesheet.

Common mistakes edit

Using too many colour stops

More stops give you more control but also more visual noise. Most effective gradient backgrounds use two or three stops. Start with the minimum and add stops only when the result does not look right.

Ignoring the angle for linear gradients

The default 180deg (top to bottom) is often the least interesting option. Diagonal gradients (45deg, 135deg) and horizontal gradients (90deg, 270deg) are frequently more visually compelling.

Not testing in dark mode

A gradient that looks great in light mode may look garish or invisible in dark mode if it uses bright saturated colours. Always test your gradients in both colour scheme contexts if your site supports dark mode.

Other free design tools available on ToolzPedia:

🎨

Color Picker

Pick colors visually with HEX, RGB and HSL outputs. Copy any format with one click.

New Use tool →

See also edit