Gradient Generator
Build a CSS gradient with a live preview, linear or radial type, up to 5 color stops, and copy-paste code. Runs in your browser, no signup, nothing stored.
background: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);background-image: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);bg-[linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)]Colors are built in your browser and not uploaded. The tool is a visual helper for a site, landing page, or design system. It does not check contrast against text and does not determine accessibility compliance; use a dedicated contrast tool to check.
The gradient generator is a free browser tool for building a CSS gradient with a live preview. Pick a type (linear or radial), set the angle on a linear gradient (0 to 360 degrees), add between 2 and 5 color stops with a hex value and a percentage position, and see a large, clean preview of the result. The matching code is generated automatically in two forms: a short `background:` and a longer `background-image:` for layering in stacks. A Tailwind arbitrary value is added for anyone on Tailwind v4. One click copies the code to your clipboard. Six ready presets (soft blue-purple, sunset, mint, premium dark, warm orange, clean gray) give you a starting point. Everything happens in your browser: the colors, angle, stop positions, and output are never uploaded or stored. This is a visual helper for a site, landing page, design system, or email template. It does not run accessibility checks, does not check color contrast, and does not determine WCAG compliance.
How to use this tool
- 01Choose a gradient typeLinear is a straight transition along an angle. Radial is a transition from the center outward in a circle. Linear suits most backgrounds; radial suits round highlights, action buttons, or header backgrounds.
- 02Set the angle (linear)The angle controls the direction of the transition. 0° = bottom to top. 90° = left to right. 180° = top to bottom. 135° (the default) goes from the top-left corner to the bottom-right corner and looks soft and natural for most gradients.
- 03Build the stopsEach color stop is defined by a color (hex like #1ed4c5) and a position in percent (0 to 100). Add up to 5 stops with "Add stop". For example: a first stop at 0% with color A, a second stop at 100% with color B.
- 04Copy the codeClicking "Copy CSS" copies the code to memory. Paste it into your site's CSS file, an inline style, or a design template. A Tailwind arbitrary value is also available for anyone working with Tailwind v4.
When is this useful?
- Landing page header backgroundA subtle gradient behind the main heading of a landing page adds depth without hurting readability. Use stops with low contrast within the same hue family.
- Standout CTA buttonA gradient on a primary button (for example blue to purple) draws more attention than a flat color. Keep it to two stops and an angle of 90° to 135° for a dynamic feel.
- Wrapper background for an email sectionSome email templates support CSS gradients. Test compatibility in the specific email client before a mass send; some clients show only the first color.
- Section background on a siteA soft vertical gradient (180°) between two neighboring shades separates content sections on a long page without hard divider lines.
- Quick brand palettePlace your main brand colors as stops in a gradient, capture the preview, and save it as a sample to show a client before a final choice.
Examples
- Simple two-stop linear gradient`linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)`. Soft blue-purple at 135°. Two stops that suit a header background.
- Three-stop gradient`linear-gradient(100deg, #ff6a3d 0%, #ff9a5a 55%, #ffd166 100%)`. Sunset: orange, light orange, yellow. A stop at 55% advances the middle hue.
- Radial gradient for a glow effect`radial-gradient(circle, #1ed4c5 0%, #0a3a3a 100%)`. A turquoise center that fades to dark toward the edges. Suits a button background or a highlighted card.
- Subtle gray-white gradient`linear-gradient(180deg, #f5f5f7 0%, #d8d8de 100%)`. A thin vertical transition that adds depth to a neutral background. Suits product cards or a table background.
- Premium dark gradient`linear-gradient(135deg, #0f172a 0%, #1f2a44 100%)`. Looks serious and suits software sites, finance, or premium pricing pages.
Tips for a better result
- Start from a presetInstead of starting from scratch, click one of the six presets (blue-purple, sunset, mint, dark, orange, gray) as a starting point and change only what you need.
- Keep text contrast in mindA gradient can create lighter and darker areas in the same background. Text must stay readable across all areas. If you use white text over a light-to-dark gradient, make sure even the lightest area meets a minimum contrast. This tool does not check that; use a dedicated contrast tool.
- Two stops are enough for most casesA simple gradient with 2 stops almost always looks better than one with 5 stops. Add a third stop only when there is a real reason (for example a distinct middle hue).
- Your data stays with youThe colors, angle, stop positions, and final CSS code are not saved to localStorage, not uploaded, and not sent to analytics. Refreshing the page resets everything.
What a CSS gradient is
A CSS gradient is a background value that produces a smooth transition between several colors, directly in the browser. No image is needed. The browser draws the transition from a text definition, which gives crisp backgrounds at any screen size, no file weight, and easy editing with CSS variables. The two common types are linear-gradient (a straight transition along an angle) and radial-gradient (a transition from the center outward).
When to choose linear vs radial
Linear suits page backgrounds, section backgrounds, buttons, and header backgrounds. It is easier to plan and fit into a design. Radial suits round highlights, a glow effect around a point, logo backgrounds, or round button backgrounds. There is no hard rule; try both and see which serves the message.
What the angle means
The angle in a linear gradient is measured relative to the vertical axis. 0° = the first color sits at the bottom and the transition goes upward. The angle increases clockwise: 90° = left to right; 180° = top to bottom; 270° = right to left. If the left/right axis looks flipped in a right-to-left layout, just add or subtract 180°.
Compatibility
All modern browsers support linear-gradient and radial-gradient without a prefix. Email support varies: Gmail shows most gradients, while Outlook sometimes shows only the first color. Always test in the specific email client before a mass send.
What the tool does not do
It does not check color contrast against text. It does not determine WCAG compliance. It does not export to a PNG/JPG image. It does not provide animation curves. For those tasks use dedicated tools. As a visual helper for showing a gradient, this tool does the job.
Privacy
Everything happens in your browser. The colors, angle, stops, gradient type, and generated CSS code are not uploaded, not saved to localStorage or IndexedDB, and not sent to analytics. Minimal operational analytics measure general usage only: a page view, a first successful use of the tool, and a copy. No value, color, or CSS code is ever sent.
Frequently asked questions
What is a CSS gradient?
A background value that produces a smooth transition between colors directly in the browser, with no image. The two common types are linear-gradient and radial-gradient.
How do I add the code to my site?
Copy the `background:` line and paste it into the CSS of the relevant element, or into an inline style. You can also use the longer `background-image:` version to layer it with an additional background image.
How many color stops does the tool support?
Between 2 and 5 stops. Two stops are enough for most gradients; add more only when there is a reason.
What is the difference between linear and radial?
Linear = a straight transition along a given angle, suited to page backgrounds. Radial = a transition from the center outward in a circle, suited to round highlights.
Does the code work in email templates?
It depends on the email client. Gmail shows most gradients, while Outlook sometimes shows only the first color. Test in the specific email client before a mass send.
Does the tool check color contrast and accessibility?
No. The tool shows the gradient and produces the CSS. It does not check contrast against text and does not determine WCAG compliance. Use a dedicated contrast tool for that.
Does the tool send my colors anywhere?
No. All processing happens in your browser. No color, stop, or code you create is uploaded, stored, or sent to analytics.
Is the tool free?
Yes. The tool is free, with no signup, no account, and no reasonable usage limit.
Related tools
- QR Code GeneratorCreate a QR code for any link or text, with colors and ready palettes. Download as PNG or SVG.פתיחה
- Image CompressorReduce the file size of an image (JPG/PNG/WebP) in your browser, without a noticeable loss of quality.פתיחה
- Background RemoverRemove the background from an image automatically, in your browser. No upload to a server. The model runs on your device.פתיחה