CSS Gradient Generator — Linear, Radial & Conic

About the CSS Gradient Generator

This tool generates CSS gradient code for all three gradient types: linear-gradient (straight-line transitions), radial-gradient (circular, centre-out transitions), and conic-gradient (sweeping, pie-chart-style transitions). Add as many colour stops as you need and set each stop's position precisely.

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colours created entirely with CSS — no images required. The three main types are linear-gradient (colours flow in a straight line at a set angle), radial-gradient (colours radiate outward from a central point), and conic-gradient (colours sweep around a central point like a pie chart). Gradients can be used as backgrounds, borders, or text fills.

How do I use this gradient generator?

Choose a gradient type (Linear, Radial, or Conic), pick your colours using the colour stops, adjust the angle or position, and watch the live preview update instantly. When you are happy with the result, click 'Copy CSS' to copy the background CSS property, or 'Copy Tailwind' to copy a Tailwind CSS class you can use directly in your HTML.

Can I add more than two colours?

Yes. Click 'Add Stop' to insert additional colour stops anywhere in the gradient. Each stop has its own colour picker and position slider so you can place colours precisely. You can also remove any stop you no longer need, down to a minimum of two stops.

What does the Tailwind export do?

Tailwind CSS v3+ supports arbitrary values, so you can write bg-[linear-gradient(...)] directly in your class attribute. The 'Copy Tailwind' button generates that class for you, ready to paste into any HTML element.

Does the generator work offline?

Yes. The CSS Gradient Generator runs entirely in your browser using JavaScript. No data is sent to any server. You can save the page and use it offline, and your gradient settings persist only in the current browser tab.

What is a conic gradient and when should I use it?

A conic gradient sweeps colours around a central point, similar to a colour wheel or pie chart. It is created with the CSS conic-gradient() function. Common uses include pie charts built entirely in CSS, progress rings, colour wheels, and decorative card backgrounds. Conic gradients are well supported in all modern browsers.

How do I set the angle of a linear gradient?

Use the angle slider (0–360°) to rotate the gradient direction. 0° flows bottom to top, 90° flows left to right, 135° flows top-left to bottom-right, and 180° flows top to bottom. In CSS, the angle is passed to the linear-gradient() function as the first argument — for example, linear-gradient(135deg, #ff0000, #0000ff).

What is the difference between a linear and radial gradient?

A linear gradient transitions colours along a straight line from one point to another (or at a set angle). A radial gradient transitions colours outward from a central point in an ellipse or circle — useful for spotlight effects, soft glows, and circular backgrounds. Both types support multiple colour stops and are widely used in modern web design for backgrounds, buttons, and hero sections.

Can I use a gradient on text in CSS?

Yes. To apply a gradient to text: set background: linear-gradient(...) on the element, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the shape of the text characters. It works in all modern browsers. The gradient generator on this page produces the CSS background property — you can adapt it for text gradients using this technique.

How do I create a gradient with transparency in CSS?

Use rgba() or hsla() colour values with an alpha channel in your gradient stops. For example: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)). This produces a gradient that fades from 80% opaque black to fully transparent — useful for overlays on images or hero sections. You can also use the transparent keyword as a shorthand: linear-gradient(to right, #2f855a, transparent).

Can I use this as a CSS background generator?

Yes — this tool is exactly a CSS background generator. The output it produces is a background CSS property declaration (for example, background: linear-gradient(135deg, #2f855a 0%, #68d391 100%)) that you paste directly into your stylesheet. It covers all three CSS background gradient types: linear (for directional fades), radial (for circular or elliptical effects), and conic (for pie-chart style backgrounds). Click "Copy CSS" to get the ready-to-use code.

How do I create a gradient border in CSS?

CSS does not support gradient values directly on border-color, but you can achieve a gradient border using two approaches. Method 1 — border-image: set border: 4px solid transparent and border-image: linear-gradient(135deg, #6c63ff, #68d391) 1. Method 2 — background-clip: apply the gradient as the background on a container element and use a pseudo-element with background-clip: padding-box to mask the inner area. Generate your gradient CSS here, then paste it into either approach. Test that it renders correctly across Firefox, Chrome, and Safari as border-image support varies slightly.

What are popular gradient colour combinations for web design?

Widely used gradient combinations in modern web design: Purple to blue (#6c63ff → #3b82f6) — common in SaaS and developer tools. Green to teal (#2f855a → #0694a2) — calm and professional. Pink to orange (#ec4899 → #f97316) — vibrant consumer app style. Dark blue to black (#1e3a8a → #0f172a) — sophisticated for dark mode headers. Sunset (orange → pink → purple) — multi-stop gradients inspired by Instagram's brand. Use this tool to enter any hex values and preview the combination before copying the CSS.

How do I create a repeating gradient in CSS?

CSS provides repeating-linear-gradient() and repeating-radial-gradient() functions that tile the colour pattern indefinitely. You define one cycle of the gradient and specify the stop positions in absolute units — for example: repeating-linear-gradient(45deg, #2f855a 0px, #2f855a 10px, transparent 10px, transparent 20px) creates alternating green and transparent stripes. Unlike standard gradients that always stretch to fill the element, repeating gradients loop the pattern. They are useful for striped backgrounds, progress bars, and decorative patterns. The CSS generator on this page produces standard linear/radial/conic gradient output — copy the CSS and replace linear-gradient with repeating-linear-gradient and set explicit stop positions to convert it to a repeating version.

What is the difference between a CSS gradient and a background image?

A CSS gradient is generated by the browser using a mathematical colour transition formula — no image file is downloaded. A background image loads a PNG, JPG, WebP, or SVG file from a URL. The practical differences: gradients are resolution-independent (they look sharp at any screen size or DPI), have zero file size overhead, render instantly without a network request, and can be animated with CSS transitions or keyframes. Background images support photographic content, complex patterns, and formats like animated GIF or WebP. For any coloured or blended background effect — hero sections, buttons, cards, overlays — a CSS gradient is almost always the better choice: lighter, faster, and easier to adjust via a single CSS property.

How does this compare to cssgradient.io or uigradients.com?

cssgradient.io is a popular gradient builder with a visual colour stop editor and more advanced features, but it loads ads and is heavier. uigradients.com offers curated preset gradients with simple two-stop configurations. This tool provides linear, radial, and conic gradient modes plus a repeating gradient toggle — all in one clean interface. The generated CSS is copy-ready and minimal. No ads, no account required, and it runs entirely in your browser. For quick gradient generation without side-tracking, this is the fastest option.

How do I generate CSS gradients programmatically in JavaScript?

Build the gradient string from variables: const gradient = `linear-gradient(${angle}deg, ${stops.map(s => `${s.color} ${s.position}%`).join(', ')})`; element.style.background = gradient;. For interactive gradients that update on scroll or hover, update the angle or stop positions in a requestAnimationFrame loop. CSS custom properties are useful for tweakable values — set --gradient-angle: 135deg; in CSS and update it with element.style.setProperty('--gradient-angle', newAngle + 'deg'). Use this tool to visually design the gradient and copy the initial CSS values.

What is a CSS linear gradient generator and how do I use one?

A CSS linear gradient generator is a visual tool that lets you pick colours, set a direction angle, and position colour stops — then outputs ready-to-paste linear-gradient() CSS without writing the syntax by hand. This tool is a linear gradient generator: select "Linear" mode, drag the angle slider or type a degree value, click the colour swatches to choose start and end colours, and add intermediate stops for multi-colour gradients. Copy the generated CSS into your stylesheet. The output works in all modern browsers and is compatible with Tailwind's bg-gradient-to-* utility classes via the Tailwind export button.

What is the CSS linear-gradient syntax?

The full syntax is background: linear-gradient(direction, color-stop1, color-stop2, ...);. The direction is either a keyword (to right, to bottom right, etc.) or an angle in degrees (135deg). Each color-stop is a CSS colour value followed by an optional position percentage (#f43f8a 40%). Example: background: linear-gradient(135deg, #6c63ff 0%, #f43f8a 100%);. If no direction is given, the default is to bottom (top-to-bottom). This generator writes the correct syntax automatically — use it to experiment visually and copy the output.

How do I create a diagonal gradient in CSS?

Use an angle in degrees or a diagonal keyword. For a top-left to bottom-right gradient: background: linear-gradient(135deg, #6c63ff, #f43f8a). Common diagonal angles: 45deg (top-left to bottom-right), 135deg (top-right to bottom-left). You can also use keywords: to bottom right or to top left. This CSS gradient generator lets you drag the angle slider to any degree and copies the exact CSS for you.

What is a conic gradient in CSS and when should I use it?

A conic gradient rotates colour stops around a centre point — like a colour wheel or pie chart. Syntax: background: conic-gradient(from 0deg, red, yellow, green, red). Common uses: pie charts (using percentage stops for each slice), colour wheels, donut chart backgrounds, and decorative spinning effects. Unlike linear and radial gradients, conic gradients sweep around a point rather than radiating outward. All modern browsers support them. This tool's Conic mode gives visual controls for start angle, centre point, and colour stops.

How do I create a smooth multi-colour gradient in CSS?

Add colour stops between start and end with explicit position percentages: background: linear-gradient(135deg, #6c63ff 0%, #43b5f4 33%, #f43f8a 66%, #ff9a44 100%). Without explicit positions, stops are distributed evenly. For gradients between perceptually distant colours (e.g. red to blue), add intermediate hue stops (orange, yellow, green) to avoid a muddy midpoint — this is the "gradient midpoint" technique. Drag colour stops along the gradient bar in this tool to position them visually.

How does the gradient color picker work in this tool?

Each colour stop in this gradient color picker has an integrated colour input: click the coloured swatch next to any stop to open your browser's native colour picker, then choose any colour visually or type in a hex value directly. The live preview updates in real time as you change colours. You can add as many stops as you need — each gets its own colour picker — so building a multi-colour gradient is as simple as clicking and dragging. The generated CSS is copied to your clipboard with one click, ready to paste into your stylesheet.

What is the best free CSS gradient generator?

The best free CSS gradient generator is one that supports all three gradient types (linear, radial, conic), works entirely in your browser without uploading data, and outputs clean, copy-ready CSS. This tool ticks all three boxes: it generates linear-gradient(), radial-gradient(), and conic-gradient() CSS with a live preview, exports both raw CSS and Tailwind arbitrary-value classes, and runs 100% client-side with no signup. If you need a visual editor for one-click gradient presets, the Presets section below the colour stop editor gives you ready-to-use combinations including Sunset, Ocean, Purple Haze, and more.

How do I create a CSS gradient for a website header or hero section?

For a website header background: choose Linear mode, set the angle to 135deg (diagonal fade) or 180deg (top-to-bottom), pick a brand colour as the start stop and a lighter or darker variation as the end stop. Then apply the generated CSS as background: linear-gradient(...) on your header element. For a full-viewport hero section, add min-height: 100vh to the element. To overlay a gradient on top of a background image, layer the gradient and image: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)), url('hero.jpg') center/cover — this darkens the image for text legibility while keeping the photo visible underneath.

How do I create a CSS gradient overlay on an image?

To place a gradient over a background image, layer both values in the CSS background property — the gradient is listed first (it renders on top): background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url('photo.jpg') center/cover no-repeat; This darkens the image top-to-bottom, keeping text legible. For a coloured tint overlay, replace the rgba values with a brand colour: linear-gradient(rgba(47,133,90,0.7), rgba(47,133,90,0.3)). For a one-sided fade: linear-gradient(to right, rgba(0,0,0,0.7), transparent). Generate the gradient CSS with this tool, then prepend it before the image URL in your stylesheet.

How do I animate a CSS gradient?

CSS cannot interpolate gradient stop values directly, but you can simulate animated gradients in two ways. Method 1 — background-size shift (pure CSS): Set an oversized gradient and animate its position with @keyframes: .animated { background: linear-gradient(270deg, #6c63ff, #f43f8a, #6c63ff); background-size: 400% 400%; animation: gradientMove 4s ease infinite; } @keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }. Method 2 — CSS custom properties + JavaScript: Define --angle as a CSS variable in your gradient and update it in a requestAnimationFrame loop for a spinning or shifting effect. Method 1 is simpler and requires no JavaScript; Method 2 gives smoother, frame-perfect control.

What is a mesh gradient and how do I create one in CSS?

A mesh gradient layers multiple radial gradients at different positions to create a soft, multi-directional colour blend — used widely in modern UI design (iOS-style wallpapers, landing page backgrounds). Pure CSS approach: stack 3–5 radial-gradient() blobs in one background property: background: radial-gradient(at 20% 30%, #6c63ff 0px, transparent 50%), radial-gradient(at 80% 70%, #f43f8a 0px, transparent 50%), radial-gradient(at 50% 50%, #68d391 0px, transparent 60%); background-color: #0f172a; Each blob fades to transparent, blending with the others. Adjust the at x% y% positions to move the colour centres. Use the Radial mode on this tool to generate each blob's gradient CSS, then combine them manually for a full mesh effect.

How do I create a rainbow gradient in CSS?

List all seven spectral colours as stops: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00cc00, #0000ff, #8b00ff). For a smoother result, add more intermediate stops: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00cc00, #00aaff, #8b00ff, #c800ff). To wrap a rainbow around a circle (for a progress ring or badge border), use conic-gradient: conic-gradient(red, orange, yellow, green, blue, violet, red). Rainbow gradients are popular for pride-themed designs, loading bars, and decorative text effects. Set the gradient type to Linear in this tool, add stops in spectral order, and copy the generated CSS.

How do I create a gradient in Figma?

Select a shape or frame in Figma, open the Fill panel in the right sidebar, click the colour swatch, and change the fill type dropdown from Solid to Linear, Radial, Angular (conic), or Diamond. Drag the gradient handles on the canvas to set direction, and click the gradient bar to add colour stops. To match a CSS gradient exactly, generate the code with this tool, then manually enter the same hex values and angle in Figma's fill panel. Figma's Angular gradient corresponds to CSS conic-gradient. For a multi-stop gradient, click the gradient bar in Figma to add as many stops as needed.

How do I use CSS custom properties (variables) with gradients?

Define gradient colours as CSS custom properties in :root so they can be reused and themed: :root { --grad-start: #6c63ff; --grad-end: #f43f8a; } .hero { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); } To support dark mode, override the variables inside a prefers-color-scheme block: @media (prefers-color-scheme: dark) { :root { --grad-start: #3b1fa8; --grad-end: #a0155a; } }. JavaScript can update CSS variables at runtime for animated or user-controlled gradients: document.documentElement.style.setProperty('--grad-start', '#ff7700'). This pattern is standard in design systems where the same gradient is used across multiple components.

How do I create a gradient button in CSS?

Apply a gradient to the button's background property instead of a solid colour: .btn { background: linear-gradient(135deg, #6c63ff, #f43f8a); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; } For hover states, you cannot directly animate a gradient — instead, use a pseudo-element trick: add an ::after layer with the hover gradient and transition its opacity from 0 to 1: .btn::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, #5b52e8, #e0306f); opacity:0; border-radius:inherit; transition:opacity 0.2s; } .btn:hover::after { opacity:1; } Remember to set position:relative and overflow:hidden on the button. Alternatively, use a background-size transition: set background-size: 200% 200% and animate background-position for a flowing effect.

How do I create gradient text in CSS?

CSS gradient text uses three properties together: background: linear-gradient(90deg, #6c63ff, #f43f8a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; Add background-clip: text; (without the -webkit- prefix) for broader support. This renders the gradient as a fill inside the text characters. Works in all modern browsers. Limitations: the text must be a single block element (not inline-wrapped), and the gradient covers the full bounding box of the element. For multiline gradient text, apply the style per line. For animated gradient text, use background-size: 200% 200% and animate background-position with a CSS keyframe. Use this tool to generate the gradient colour stops, then paste them into the gradient text snippet above.

Can I apply a CSS gradient to a border?

Directly applying a gradient to border-color is not supported in CSS — border-color accepts only solid colours. The standard workaround is the padding + pseudo-element technique: set border: none; padding: 2px; background: linear-gradient(135deg, #6c63ff, #f43f8a); border-radius: 12px; on the outer element, and set background: white; border-radius: 10px; on an inner wrapper — the gradient shows as a border between the two. A simpler alternative uses background-clip: .card { border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #6c63ff, #f43f8a) border-box; } This is the cleanest approach and avoids extra DOM elements. Support is good in all modern browsers (Chrome, Firefox, Safari, Edge). Use this gradient generator to find the colours, then apply them to one of these patterns.

How do I create a CSS gradient background for a full page?

Apply the gradient to the body element with min-height: 100vh: body { min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } This covers the full viewport even when content is shorter than the screen. For a background that scrolls with content: set height: 100% on both html and body. Add background-attachment: fixed for a stationary gradient as the user scrolls — useful for a parallax effect. Copy the CSS from this generator and apply it to the body selector in your stylesheet.

How do I create a hard-stop (sharp edge) CSS gradient?

Set the same position for two adjacent colour stops to create a sharp colour edge with no blend: background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%); — the transition is instant at 50%. For striped patterns: background: repeating-linear-gradient(45deg, #6c63ff 0px, #6c63ff 10px, #f43f8a 10px, #f43f8a 20px); Hard stops are useful for progress bars, flag-style split backgrounds, and diagonal stripe overlays. Pick your colours in this generator, then add the duplicate stop positions to the output CSS.

How do I use a CSS gradient as a card background or overlay?

For a gradient card background: .card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; padding: 24px; color: white; } For a gradient overlay on an image to improve text legibility: .card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.7) 100%); border-radius: 16px; } Common overlay patterns: dark-to-bottom (image captions), light-to-top (dark UI cards), and diagonal overlays for hero sections. Copy the CSS from this generator and apply it to the background or ::after pseudo-element.