Free · Fast · Privacy-first

Linear Gradient CSS Generator

Linear gradients are the most widely used gradient type in CSS, appearing in backgrounds, buttons, hero sections, and dividers across virtually every modern website.

⚡

Set any angle from 0deg to 360deg

🔒

Add, remove, and position colour stops freely

✨

Live preview updates as you adjust settings

⚡

Copy CSS output ready for any project

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Gradient to your website

Drop the Gradient into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Understanding CSS Linear Gradients: Angles, Stops, and Direction

A CSS linear gradient transitions colours along a straight line from one end of the element to the other. The direction of that line is specified either as a keyword (to right, to bottom, to top left) or as an angle in degrees measured clockwise from the top of the element. An angle of 0deg points upward and the value increases clockwise, so 90deg points right, 180deg points downward, and 270deg points left. The keywords map to specific angles: "to bottom" is equivalent to 180deg, "to right" is 90deg, and "to bottom right" is approximately 135deg on a square element. Choosing between keywords and angles is a matter of preference. Keywords are readable and self-documenting; numeric angles give precise control for diagonal designs that need an exact geometric angle rather than a corner-pointing direction.

Colour stops define where and how gradient transitions occur. Each stop is a colour value followed by an optional position. Without a position, the browser distributes stops evenly across the gradient line. With positions specified, you can compress or expand colour zones to create any blend ratio you need: linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%) creates a sharp two-zone split rather than a gradual blend. Stop positions can be in percentages, pixels, rem, or any valid CSS length unit. Browser support for CSS linear gradients without vendor prefixes is universal across Chrome, Firefox, Safari, Edge, and all major mobile browsers in versions released in the past several years, covering more than 99% of current web traffic.

FixTools generates the complete CSS linear-gradient() declaration based on your visual settings. Copy the output and apply it as background: linear-gradient(...) on any HTML element. The generated CSS requires no post-processing and works in any environment that supports standard CSS, from plain HTML files to React components to server-rendered templates in any language or framework.

Common mistakes with hand-written linear-gradient declarations cluster around a few specific patterns worth knowing. The most frequent error is reversing the direction syntax: developers familiar with mathematical conventions write 0deg expecting a left-to-right gradient and get a bottom-to-top result instead, because CSS measures angles clockwise from the top rather than counter-clockwise from the right. The second is forgetting that linear-gradient is an image, not a colour, so applying it to background-color silently fails. The third involves percentage positions: writing linear-gradient(to right, red 50, blue 100) without the percent signs produces an invalid declaration that is rejected entirely and falls back to no background at all. Finally, mixing colour formats inside a single gradient (hex, rgb, hsl, named colours) is legal but can produce subtle interpolation differences between browsers, so consistency within a declaration is the safer choice.

MDN linear-gradient() reference Can I Use: CSS Gradients browser support

How to use this tool

💡

Configure your linear gradient direction and colour stops. Example output: background: linear-gradient(to right, #f093fb 0%, #f5576c 100%)

How It Works

Step-by-step guide to linear gradient css generator:

1
Open the gradient tool
Click "Open CSS Gradient Generator" to launch the visual editor. Once it loads, locate the gradient type selector at the top of the configuration panel and choose Linear Gradient to ensure you are working with the linear-gradient() function rather than the radial type.
2
Choose an angle or direction
Enter an angle in degrees from 0 to 360 in the angle input field, or select a directional keyword from the dropdown. Use 90deg or "to right" for a horizontal transition, 180deg or "to bottom" for vertical, or 135deg for a diagonal. The live preview updates immediately to show the effect of your chosen direction.
3
Add colour stops
Add at least two colour stops to define the gradient. Click the colour swatch of each stop to open the colour picker and set a hex, RGB, or HSL value. Drag each stop along the gradient track to set its percentage position. Click the add button to insert additional stops between existing ones for more complex transitions.
4
Preview the result
The live preview shows your gradient applied to a sample element in real time. Resize the preview panel if available to see how the gradient looks at different element proportions. Long horizontal elements show angle and direction effects more clearly than square previews.
5
Copy the CSS
Click the copy button beside the output field to copy the complete background: linear-gradient(...) declaration to your clipboard. Paste it directly into the CSS rule for your target element in your stylesheet, CSS module, or component file. No syntax changes are needed.

Real-world examples

Common situations where this approach makes a real difference:

Navigation bar background

A developer wants a navigation bar that transitions from a brand colour on the left to a slightly darker shade on the right, adding depth to what would otherwise be a flat header band. They use the generator to produce a horizontal linear gradient between two tones of their primary brand colour, copy the CSS, and apply it to the nav element. The subtle directional shift provides visual richness to the navigation without introducing any colour that would compete with menu labels, logos, or action buttons in the header.

Button hover state

A designer wants primary buttons to have a gradient fill that reverses direction on hover for a polished interactive feel. They generate two linear gradients: one at 90deg for the default state and one at 270deg for the hover state. Both use the same two colour stops but in opposite directions. The first is applied as the default background, the second as the :hover background, with a CSS transition on background applied to smooth the swap. The result is an elegant directional flip animation on hover.

Progress bar fill

A developer building a skill or completion progress bar wants each bar to use a gradient fill rather than a flat colour to make the filled portion feel more dynamic. They generate a left-to-right linear gradient from a vivid start colour to a slightly lighter and brighter end colour, apply it to the progress fill element using background: linear-gradient(90deg, ...) with width controlled by a CSS variable, and achieve a result that makes static percentage bars feel energetic and visually interesting without any additional image or SVG assets.

Footer section transition

A landing page layout has a hard visual break between the main content area and the dark footer that looks abrupt and unpolished. The developer generates a short vertical linear gradient from the content background colour at the top stop to the footer background colour at the bottom stop, applies it to a transition div positioned between the content and footer sections, and eliminates the harsh horizontal edge. The gradient creates a smooth colour shift that guides the eye naturally from the body of the page into the footer.

Pro tips

Get better results with these expert suggestions:

Use "to bottom right" for quick diagonal without calculating degrees

Direction keywords like "to bottom right" are easier to read in CSS and require no mental calculation. They also adapt to the element's aspect ratio: "to bottom right" always points to the exact corner of the element regardless of its width or height, whereas a fixed numeric angle like 135deg uses the same geometric angle on every element. Reserve numeric degree values for situations where you need a specific non-corner direction such as a shallow 20deg tilt or a precise 60deg diagonal.

Create a hard colour stop by doubling a position

Placing two colour stops at the same percentage position creates an instant sharp transition with no blending between the two colours. For example: linear-gradient(to right, #667eea 40%, #764ba2 40%) splits the element into a solid left zone and a solid right zone. Combine multiple hard stops to build CSS-only striped or segmented patterns. This approach requires no images, no SVG, and no JavaScript, making it one of the most performant ways to produce stripe or checker effects in backgrounds.

Repeat gradients with repeating-linear-gradient()

The repeating-linear-gradient() function tiles the gradient pattern across the element. Define a short pattern with stops that cover only a small distance, such as from 0px to 20px, and the browser automatically repeats the pattern to fill the entire element. This is ideal for creating CSS-only diagonal stripe patterns, ruled line backgrounds, and progress indicators. The output is visually identical to a background image pattern but renders at any resolution and requires zero HTTP requests.

Smooth colour interpolation with oklch

Modern browsers support colour space interpolation hints in gradients. Adding "in oklch" after the function name changes how colours blend at midpoints: linear-gradient(in oklch, #ff0000, #0000ff). The oklch colour space produces more perceptually uniform midpoints and avoids the muddy grey band that can appear at the centre of sRGB gradients between complementary colours like red and blue. Use oklch interpolation when gradient midpoints look dull or desaturated in the standard sRGB default.

FAQ

Frequently asked questions

linear-gradient() is a CSS function that creates a colour transition along a straight line in a specified direction. You provide the direction as an angle or keyword, then list two or more colour stops with optional positions. The browser renders a smooth blend between stops. The function is used as a value for background or background-image because CSS treats gradients as images, not as colours. This means you cannot use it as the value for background-color, which accepts only colour values. The most basic form is: background: linear-gradient(to right, #667eea, #764ba2).

CSS provides eight directional keywords for linear-gradient. The four cardinal directions are: to top (0deg), to right (90deg), to bottom (180deg), and to left (270deg). The four diagonal directions are: to top right (approximately 45deg), to bottom right (approximately 135deg), to bottom left (approximately 225deg), and to top left (approximately 315deg). The diagonal keywords adapt to the element's aspect ratio by always pointing to the exact corner, rather than using a fixed geometric angle, so "to bottom right" points to the bottom-right corner of a wide rectangle and a tall rectangle alike.

Yes. You can add as many colour stops as you need. Each stop has a colour value and an optional position: linear-gradient(to right, red 0%, yellow 50%, green 100%). The browser blends smoothly between adjacent stops. Unpositioned stops are distributed evenly. You can also add multiple stops at identical positions to create hard transitions without blending between specific colours. There is no hard browser limit on the number of stops, though gradients with more than ten stops are rarely necessary and can be difficult to maintain when colours change.

A soft stop produces a gradual, smooth transition between adjacent colour stops. This is the default behaviour: the browser interpolates between each pair of stops across the distance between their positions. A hard stop places two colour stops at exactly the same position: for example, blue 50%, red 50%. This eliminates all blending between those two colours and creates an instant, sharp colour change with a crisp boundary. Hard stops are used for striped patterns, segmented fills, and designs that need precise colour boundaries rather than gradual fades.

You can, but you need to use it carefully. The CSS keyword "transparent" is defined as rgba(0,0,0,0): transparent black. When a gradient interpolates between a colour and the transparent keyword, it blends through the black channel at the midpoint, which can produce a grey or dark band that was not intended. For accurate colour fading, use your actual colour at alpha zero: rgba(102, 126, 234, 0) instead of the bare transparent keyword. This preserves the hue of the colour as it fades out and eliminates the unwanted dark artefact at the midpoint.

You can add a transition hint between two colour stops to shift where the 50% blend point falls. Place a single percentage value between two stops: linear-gradient(to right, red, 30%, blue). The 30% hint instructs the browser to reach the midpoint of the red-to-blue blend at the 30% position rather than at the natural midpoint between the two stops. This shifts the blend toward one side, making the gradient appear weighted or asymmetric. Midpoint hints are separate from colour stops and do not have a colour value of their own.

CSS transition and animation properties cannot interpolate between two different gradient declarations because the CSS engine does not treat them as the same animatable type. The standard workaround is to create an oversized gradient with background-size: 200% 200% or larger, then animate background-position using @keyframes to shift the visible region of the gradient. This produces a flowing colour-shift effect. For true colour-stop animation, the CSS @property rule can register a custom colour property as an animatable type, then that property can be referenced and animated inside the gradient function in modern browsers.

Yes. Linear gradients are background properties and work in any layout context without affecting the layout itself. You can apply a gradient to a grid container, a flex container, individual grid cells, flex children, or any element in the layout regardless of how it is positioned. The gradient fills the element's background area and does not participate in flow or spacing calculations. You can also apply different gradients to overlapping grid areas and control their stacking order with z-index to create layered visual compositions within a single grid structure.

Muddy midpoints typically occur when two colour stops are complementary hues in sRGB space: the midpoint colour interpolates through a desaturated grey zone. The most effective solution is to use oklch colour space interpolation: linear-gradient(in oklch, color1, color2). Oklch interpolates through perceptually uniform midpoints that maintain saturation and avoid grey artefacts. If you cannot use oklch because you need wider browser support, adding a manually specified midpoint stop with a more saturated hue at the 50% position also prevents the grey band from appearing.

A two-div approach gives you separate elements that can each carry their own padding, content, and event handlers, which is sometimes useful when the two zones contain distinct interactive regions. For a purely visual colour split, a single linear-gradient with hard stops is the better choice. It requires one element instead of two, eliminates the layout overhead of an extra DOM node, and uses no JavaScript for resize handling because the gradient automatically adjusts to whatever height the parent occupies. A hard-stop gradient like linear-gradient(to bottom, #fff 0%, #fff 50%, #000 50%, #000 100%) produces an exact 50/50 colour split that responds to container height changes without any additional code, which two stacked fixed-height divs cannot do reliably.

Print rendering of CSS gradients varies between browsers and print drivers. Chrome and Edge generally render gradients accurately when -webkit-print-color-adjust: exact or print-color-adjust: exact is set on the element. Firefox respects the same property but with somewhat less predictable colour accuracy. Safari prints gradients but may simplify them to a solid average colour at certain print resolutions. For documents where the printed appearance matters, test the actual printed output on the target printer and consider providing a flat-colour fallback inside an @media print block: @media print { .hero { background: var(--gradient-average-colour); } }. This avoids relying on print driver gradient interpretation entirely.