Build a custom CSS linear gradient visually, then copy the code — no signup required. Adjust colors, stops, and angle, and grab either CSS or SVG output.
How to Use the Linear Gradient Generator
Pick a direction, add your colors, and copy the code — that’s the whole process. Set the angle using the dial or the presets (To Right, To Bottom, and the diagonals cover the most common directions). Add or remove color stops, drag each stop’s position slider to control where it sits along the gradient, and use the opacity slider on any stop to fade a color toward transparent. The preview updates instantly. When the gradient looks right, switch to the CSS or SVG tab and hit copy.
Understanding CSS linear-gradient Syntax
A CSS linear-gradient() takes an angle followed by a list of colors and their positions, like linear-gradient(90deg, #0F0D72 0%, #FFC502 100%). The angle controls direction: 0deg points straight up, 90deg points right, 180deg points down, and 270deg points left — increasing clockwise from there. CSS also accepts keyword directions such as to right or to bottom left as shorthand for these same angles.
Each color in the list is a stop, and the percentage after it sets where that color is fully reached along the gradient line. Stops don’t have to be evenly spaced — pulling two stops close together creates a sharp transition, while spreading them out creates a smoother blend. Colors can use hex (#FFC502), rgba for transparency (rgba(255, 197, 2, 0.5)), or any valid CSS color format. To use the generated code, apply it to the background property of any element: background: linear-gradient(...); works directly in a stylesheet, a <style> block, or WordPress’s Additional CSS panel under Appearance → Customize.
CSS vs SVG Gradients: When to Use Each
CSS gradients are the right choice for backgrounds, buttons, and any styling applied through a stylesheet — they’re lighter to write and update, and they respond to CSS variables and media queries. SVG gradients exist for a different job: filling shapes inside an SVG graphic, like a chart bar, an icon, or a custom illustration, where fill="url(#gradientId)" references a <linearGradient> defined in the SVG’s <defs>.
The two use different coordinate systems for direction. CSS gradients use a single angle in degrees. SVG gradients use x1, y1, x2, y2 coordinates that define a line the gradient runs along, expressed as percentages of the shape’s bounding box. This generator handles that conversion automatically — the angle set on the dial is translated into the matching SVG coordinates in the SVG output tab, so both outputs always represent the same visual gradient.
FAQ
How do I change the direction of a linear gradient?
Set the angle in degrees (0–360) using the dial or number field, or click a preset like “To Right” or “To Bottom.” In CSS, 90deg points right and 180deg points down; the angle increases clockwise from 0deg at the top.
Can a linear gradient have more than two colors?
Yes — CSS supports any number of color stops in a single gradient. This generator allows up to 6 stops; add one with “Add color stop” and drag its position slider to place it anywhere along the gradient.
Is there a difference between CSS gradients and SVG gradients?
Yes. CSS gradients style backgrounds and elements through a stylesheet using an angle in degrees. SVG gradients fill shapes inside SVG graphics using x1/y1/x2/y2 coordinates instead of an angle. The two aren’t interchangeable — a CSS gradient can’t fill an SVG shape, and vice versa.
Do linear gradients work in all browsers?
CSS linear gradients have full support in all modern browsers, including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.
Can I make part of the gradient transparent?
Yes — use the opacity slider on any color stop to fade that color toward transparent. The generator outputs this as an rgba() value in CSS, or a stop-opacity attribute in SVG.
Where do I paste the generated CSS in WordPress?
Paste it into the background property of a CSS rule targeting the element you want to style — for example, in a block’s Additional CSS Class(es) field paired with a custom CSS rule, or directly under Appearance → Customize → Additional CSS.