BrowserTools
Advertisement
Home / Generators / CSS Gradient Generator

CSS Gradient Generator

Build linear, radial and conic CSS gradients with a live preview and copy-ready code.

Loading CSS Gradient Generator… If nothing happens, please enable JavaScript.

Frequently asked questions

Is anything sent to a server when I build a gradient?
No. The gradient is computed and previewed entirely in your browser using CSS rendering. The tool contains no backend, no telemetry, and no network requests. Your colour choices exist only in the current browser tab until you copy the CSS.
What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colours along a straight line at a specified angle — 0deg is bottom-to-top, 90deg is left-to-right. A radial gradient radiates from a central point outward in a circle or ellipse. A conic gradient sweeps colours around a central point by angle, like the segments of a pie chart or the face of a colour wheel.
Do CSS gradients work in all browsers?
Linear and radial gradients have been supported without vendor prefixes since Chrome 26, Firefox 16, Safari 7, and Edge (all versions). Conic gradients arrived later — Chrome 69, Safari 12.1, and Firefox 83 — but all current browser versions support all three types. No vendor prefixes are needed for any modern browser.
How do I make a gradient with a sharp edge instead of a smooth blend?
Place two colour stops at the same position. For example, `linear-gradient(red 50%, blue 50%)` creates a hard split with red filling the top half and blue the bottom half exactly. You can combine sharp and smooth stops in the same gradient to create striped or banded effects.
Can I use gradients as a border or text fill?
You cannot apply a gradient directly to the `border-color` property, but you can achieve a gradient border using the `border-image` property with a gradient value, or by using a pseudo-element technique. For gradient text, apply the gradient as a `background`, then use `background-clip: text` and `color: transparent` — a widely supported technique in modern browsers.
What is a colour stop and how many can I add?
A colour stop defines the colour at a specific position within the gradient, expressed as a percentage or length. Browsers interpolate smoothly between adjacent stops. You can add as many stops as you like — CSS has no specified maximum — though very large numbers of stops can affect gradient rendering performance on lower-end devices.
How do I control the midpoint between two colour stops?
CSS gradients support a colour hint (also called a midpoint hint) between two stops, written as a bare percentage: `linear-gradient(red, 30%, blue)` shifts the midpoint of the transition to the 30% mark rather than the default 50%. This gives finer control over how fast or slowly colors blend, useful for creating natural-looking light effects.
Can I layer multiple gradients over each other?
Yes. The `background` property accepts multiple comma-separated values, and each can be a gradient. They stack from top to bottom, so `background: linear-gradient(...), radial-gradient(...)` draws the linear gradient on top of the radial one. You can combine gradients with image URLs the same way, creating composite backgrounds without any image editing software.
What was the old way to make gradients before CSS3?
Before CSS gradients were standardised, web designers created gradient effects using sliced images — a 1-pixel-tall GIF or PNG stretched to fill the element's width. This approach required design software, produced extra HTTP requests, looked blurry on high-DPI displays, and was painful to update when brand colours changed. CSS gradients, standardised as part of CSS Images Level 3, eliminated all of those drawbacks.
How do I make a gradient that works as a loading spinner?
A conic gradient combined with CSS `animation: spin 1s linear infinite` and `border-radius: 50%` is the modern pure-CSS approach to progress spinners. Set the gradient from your accent colour to transparent, starting at 0deg. The spinning creates the impression of a chasing arc. This technique replaces animated GIFs and avoids JavaScript for a common UI pattern.

About CSS Gradient Generator

A CSS gradient is a function that generates a smooth transition between two or more colors, rendered entirely by the browser without any image file. There are three types: `linear-gradient()` transitions colors along a straight axis at any angle; `radial-gradient()` radiates outward from a center point in a circle or ellipse; and `conic-gradient()` sweeps colors around a center point like the face of a clock. All three are resolution-independent — they render crisp at any screen density, from standard HD displays to high-DPI Retina screens — and because they are computed on the GPU, they carry essentially zero performance cost compared to image backgrounds.

CSS gradients are used everywhere in modern web design. Subtle linear gradients add depth to hero sections, button states, and card backgrounds without the overhead of image assets. Radial gradients create spotlight effects, vignettes, and ambient glow around focal elements. Conic gradients underlie pie charts, loading spinners, and colour wheels built purely in CSS. Beyond aesthetics, gradients in CSS are versioned in source code alongside the markup they style, making them easier to maintain, update, and hand off than image files generated in design software.

This tool provides a live visual editor for all three gradient types. You add, remove, and reposition colour stops on an interactive track, adjust the angle or shape, and the CSS output updates in real time. The generated snippet is standard, vendor-prefix-free CSS3 that works in all modern browsers. It runs entirely client-side — no uploads, no accounts, no tracking. Changes exist only in your browser session and the final CSS you copy to your clipboard.

One important consideration is accessibility: gradients are decorative backgrounds and do not carry text alternatives, but they affect the contrast ratio of any text rendered on top of them. A gradient that starts light and ends dark can make text readable on one side of the element and illegible on the other. Always test your gradient backgrounds against your foreground text using a contrast checker. A practical technique is to add a semi-transparent dark overlay via an additional CSS layer — `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))` — to ensure consistent minimum contrast across the entire gradient area.

From 1990s Garish Rainbow Bars to GPU-Accelerated CSS: The Web Gradient Timeline

Web designers first got gradients in the late 1990s through GIF and PNG image slices — a single-pixel-wide image tile stretched horizontally, or a full-width image background. The technique was so common that it shaped an entire aesthetic: the deep blue-to-black gradient navigation bar became synonymous with early-2000s corporate web design. Creating or adjusting these gradients required Photoshop, a new export, and a server deployment — a workflow that could take hours for a colour change that might be rejected in review.

Vendor-prefixed CSS gradient syntax began appearing around 2008: `-webkit-gradient()` in Safari, with its own idiosyncratic syntax that bore little resemblance to what would become the standard. Firefox introduced `-moz-linear-gradient()` with a different syntax. Internet Explorer offered no gradient support until IE10, driving developers to use the proprietary `filter: progid:DXImageTransform.Microsoft.gradient()` syntax instead. For several years, achieving consistent cross-browser gradients required writing four separate declarations for the same effect — a maintenance nightmare that made CSS preprocessors and gradient-generation tools enormously popular.

The W3C standardised CSS gradients in the CSS Images Level 3 specification, with linear and radial gradients gaining universal prefix-free support by around 2013. Conic gradients — proposed by Lea Verou in a blog post in 2015 — were implemented in browsers between 2018 and 2020 after she shipped a polyfill that demonstrated the use cases. The progression from hacky image tiles to native GPU-rendered CSS primitives tracks the broader story of the web platform maturing from a document system into a full application runtime.

Related tools

Color Converter & Contrast Checker

Convert colors between HEX, RGB, HSL and HSV, plus WCAG contrast ratio checker.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic, monochromatic and shade/tint palettes from any base color.
Advertisement