Gradient Generator

A CSS gradient is a smooth visual transition between two or more colors rendered entirely by the browser — no image file required. Because gradients are generated programmatically, they scale perfectly to any resolution, load instantly, and can be updated with a single line of code. This gradient generator builds the correct CSS syntax for you so you can copy and paste production-ready code directly into your stylesheet.

Every gradient consists of at least two color stops: a color value paired with a position (expressed as a percentage of the gradient's total length or radius). The browser interpolates colors between each stop using its built-in color-mixing algorithm, creating the smooth transitions you see in the preview.

Three gradient functions are supported by all modern browsers:

• linear-gradient — colors transition along a straight line at a specified angle.
• radial-gradient — colors radiate outward from a focal point in a circle or ellipse shape.
• conic-gradient — colors sweep around a central point like the hands of a clock, creating pie-chart-style effects.

Understanding the underlying CSS syntax helps you fine-tune gradients beyond what any visual tool provides. The sections below break down each gradient type, explain the formula this tool uses, and show real worked examples you can adapt immediately.

Each gradient type has a distinct function signature. This generator produces output that matches these signatures exactly, so the copied code will work in any modern browser without modification.

Linear Gradient

The formula for a linear gradient as generated by this tool is:

linear-gradient(<angle>deg, <color1> <pos1>%, <color2> <pos2>%, ...)

Color stops are first sorted by ascending position, then joined with commas. The angle controls the direction of the color flow: 0deg flows bottom-to-top, 90deg flows left-to-right, 180deg flows top-to-bottom, and 270deg flows right-to-left.

Radial Gradient

radial-gradient(<shape> at <position>, <color1> <pos1>%, ...)

Shape is either circle or ellipse. Position sets the focal center using keywords such as center, top left, or bottom right.

Conic Gradient

conic-gradient(from <angle>deg at <position>, <color1> <pos1>%, ...)

The from angle rotates the entire sweep, and the position keyword sets the center point around which colors rotate.

Linear gradients are the most commonly used gradient type on the web. They appear in hero backgrounds, buttons, cards, overlays, and navigation bars. The key parameter is the angle, which ranges from 0 to 360 degrees and determines the direction colors flow across the element.

Common angle shortcuts you will encounter in CSS documentation use directional keywords like to right (equivalent to 90deg), to bottom (180deg), and to bottom right (135deg). This tool generates the numeric degree form, which is unambiguous and has universal browser support.

Adding a third or fourth color stop dramatically changes the visual impact of a linear gradient. A three-stop gradient might use a bright color in the center that fades to dark shades on both ends, creating a spotlight effect. The position percentage of each stop tells the browser exactly where that color should appear at full intensity — for example, a stop at 50% sits exactly in the middle of the element.

When designing with linear gradients, consider the reading direction of your audience. Left-to-right gradients (90deg) feel natural in left-to-right languages, while diagonal gradients (45deg or 135deg) add energy and dynamism to a layout. You can up to 6 color stops with this tool, which is more than enough for virtually any design need.

Radial and conic gradients extend the creative possibilities far beyond straight-line transitions. Each serves distinct design goals and produces visually unique results.

Radial Gradients

A radial gradient radiates outward from a focal point. You control two key parameters: the shape (circle or ellipse) and the position of the center point. A circle maintains equal radius in all directions, producing perfectly round color rings. An ellipse stretches to fill its container, adapting its proportions to the element's width and height.

Positioning the center away from the middle creates spotlight or lens-flare effects. A radial gradient centered at top left with a bright inner color and dark outer color mimics a corner light source, adding depth to flat interfaces. Centered at bottom, the same gradient can simulate a ground glow effect popular in dark-mode designs.

Conic Gradients

A conic gradient sweeps colors around a central point like a color wheel or pie chart. Unlike linear and radial gradients which blend along a line or radius, conic gradients blend around an angle. The from angle rotates the starting point of the sweep, and the position sets the center of rotation.

Conic gradients are ideal for creating pie charts, donut charts, color pickers, and starburst decorative elements. When the first and last color stops are the same color, the gradient appears seamless, creating a continuous color wheel effect. This tool supports the full range of positions and angles for conic gradients, giving you complete creative control.

All three gradient types fully support transparency via RGBA or HSL color values with alpha channels — though the hex color picker in this tool outputs solid hex values, you can manually edit the copied CSS to add transparency as needed.

Gradients are a powerful design element, but like any tool they can be misused. Following these principles will help you create gradients that enhance your UI rather than distract from it.

Contrast and Accessibility

Text placed over a gradient background must maintain sufficient contrast at every point along the gradient, not just the average. The WCAG 2.1 standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Because a gradient varies in color across its length, a dark gradient that starts readable may become unreadable at its lightest point. Always check contrast at both the lightest and darkest ends of any gradient used behind text.

Performance Considerations

CSS gradients are rendered by the GPU and are extremely lightweight compared to image files. A complex six-stop gradient adds essentially zero kilobytes to your page weight. However, animating gradient properties (like angle or color values) via JavaScript on every frame can be expensive. For animated gradients, prefer animating background-position on an oversized gradient background, which is GPU-accelerated and far more performant.

Color Harmony

The most visually appealing gradients typically use colors that are adjacent on the color wheel (analogous colors) or complementary pairs. Pure primary-to-primary transitions (red to blue, for example) often pass through a muddy gray midpoint. To avoid this, add an intermediate stop at 50% with a vivid intermediate hue, or use HSL color values and ensure the hue arc stays within a pleasing range.

Consistency Across a Design System

Define your gradient palette in CSS custom properties or design tokens so every gradient-using component draws from the same source of truth. This makes site-wide gradient updates a one-line change rather than a hunt-and-replace across dozens of files. The CSS output from this generator slots directly into a custom property definition.