Free · Fast · Privacy-first

Two Color Gradient CSS

A two-colour gradient is the most versatile and universally applicable form of CSS gradient.

⚡

Generate a gradient between any two colours

🔒

Set direction and stop positions precisely

✨

Outputs minimal, readable CSS gradient code

⚡

Works for backgrounds, buttons, borders, and text

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.

Two-Stop CSS Gradients: Simplicity, Versatility, and Design Clarity

Two-colour gradients are the foundation of CSS gradient design and the most appropriate gradient type for the majority of UI components. With only two stops, the transition is visually unambiguous: the eye reads a single directional colour shift from start to end without confusion. This simplicity is a feature, not a limitation. Buttons, badges, cards, and hero sections all benefit from the focused, clear colour shift of a two-stop gradient. More complex multi-stop gradients have their place in illustrative backgrounds and artistic compositions, but for functional UI components the two-stop form is almost always more appropriate because it does not compete with the content displayed on or within the element. The primary design decision for a two-stop gradient is the colour pairing. A well-chosen pair of adjacent or analogous hues produces a harmonious, professional-grade transition. Complementary or high-contrast pairs produce vibrance and visual energy, appropriate for call-to-action buttons and highlight elements.

The CSS syntax for a two-colour gradient is straightforward: background: linear-gradient(direction, color1 position1, color2 position2). Both position values are optional. Without explicit positions, the browser automatically places the first stop at 0% and the second at 100%, distributing the transition evenly across the full element. Specifying positions allows you to weight the gradient toward one colour: linear-gradient(to right, #667eea 30%, #764ba2 100%) extends the first colour solidly across the initial 30% of the element before the transition begins, making the first colour the dominant presence. For radial two-stop gradients, the equivalent form is background: radial-gradient(circle at center, color1 0%, color2 100%). The same position weighting principles apply, with the inner colour at 0% and the outer colour at 100%. Positions can also use pixel or rem values rather than percentages for precise control in fixed-dimension elements.

FixTools produces the two-stop gradient CSS directly from your colour inputs and direction or shape configuration. The output is a single, clean background declaration with no extra syntax or vendor prefixes. Copy it and apply it to any HTML element in your stylesheet, a CSS module, a Tailwind arbitrary value, or a CSS-in-JS template literal. No modification to the generated code is required before use.

Edge cases worth knowing about two-stop gradients revolve around extreme stop positioning and zero-distance transitions. When both stops sit at the same position (linear-gradient(to right, red 50%, blue 50%)), the result is a hard split with no blend at all, effectively producing a two-zone solid background using a single CSS declaration. When the first stop position is greater than the second (linear-gradient(to right, red 80%, blue 20%)), browsers handle the case by treating the second stop as if it sat at the first stop's position, producing the same hard-split result. When stops use mixed units (linear-gradient(to right, red 50px, blue 80%)), the percentage resolves against the gradient line length, so the visual result depends on element dimensions. For predictable behaviour across responsive layouts, prefer consistent units within a single gradient declaration. Negative stop positions are valid and useful when you want a colour to start outside the visible area.

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

How to use this tool

💡

Pick two colours and a direction. Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

How It Works

Step-by-step guide to two color gradient css:

1
Open the CSS Gradient Generator
Click "Open CSS Gradient Generator" to launch the editor. The visual interface gives you a live preview of the gradient as you configure each setting, so you can see the result immediately without switching between a code editor and a browser window.
2
Add exactly two colour stops
Set the first stop to your start colour and the second stop to your end colour. If the tool shows more than two stops by default, remove the extras. A two-stop gradient keeps the transition clean and easy to read on any element size from a small badge to a full-page hero section.
3
Set the direction
Choose an angle or directional keyword for the gradient transition. For horizontal gradients use 90deg or "to right"; for classic diagonal depth use 135deg; for vertical top-to-bottom use 180deg or "to bottom". The live preview updates immediately when you change the direction setting.
4
Copy the CSS output
Copy the single background: linear-gradient(...) declaration from the output panel. Paste it directly into your stylesheet, CSS module, or component. No modification to the generated code is needed before applying it to your element.

Real-world examples

Common situations where this approach makes a real difference:

Primary call-to-action button

A checkout flow needs a prominent "Buy Now" button that stands out from the surrounding page content and communicates urgency and confidence. The developer generates a 90-degree left-to-right gradient from brand blue (#4facfe) to a slightly deeper cyan (#00f2fe), applies it as the button background with border-radius: 8px, padding: 14px 32px, and font-weight: 700. The gradient makes the button feel more three-dimensional and energetic than a flat colour, and a hover state uses a reversed 270-degree direction with a short transition for a satisfying interactive response.

Profile card header band

A user profile page displays a coloured header band at the top of each profile card to add visual personalisation. Rather than a flat solid colour that would look generic across many user cards, the designer generates a diagonal two-stop gradient from each user's assigned brand colour to a complementary lighter tint. Applied to the card header div at height: 80px, the gradient gives each card a feeling of individual identity and visual richness using only a single CSS background property change with no additional image requests.

Progress bar fill

A project management tool shows task completion as horizontal progress bars. Each bar uses a left-to-right two-stop gradient from a vivid start colour to a slightly lighter tint at the end stop, applied with background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%). The gradient transition from a more saturated start to a lighter end makes the filled portion feel dynamic and forward-moving rather than static and flat, and the visual progression toward lighter values subtly reinforces the concept of completion and progress.

Section alternating background

A portfolio site uses alternating page sections for rhythm and visual separation without harsh horizontal dividers. Odd sections use plain white; even sections use a subtle two-stop gradient from off-white (#fafafa) at the top to a pale blue-grey (#f0f4f8) at the bottom, applied with background: linear-gradient(180deg, #fafafa 0%, #f0f4f8 100%). The gentle directional colour shift creates a sense of visual depth and separates content areas clearly while maintaining a comfortable, low-contrast reading environment across the full page.

When to use this guide

Use this when you need a simple, clean gradient between exactly two colours for a background, button, badge, or UI element.

Pro tips

Get better results with these expert suggestions:

Use analogous colours for calm, professional gradients

Analogous colour pairs, those adjacent on the colour wheel such as blue and purple or green and teal, produce smooth and harmonious transitions that read as refined and trustworthy in professional contexts. They are the most common choice for SaaS products, fintech dashboards, and corporate websites because the perceptual transition between analogous hues is naturally even and avoids the muddy midpoint that often appears when complementary pairs are blended in sRGB colour space at full saturation.

Shift lightness between stops for monochromatic depth

A monochromatic two-stop gradient uses the same hue at different lightness values: for example, from a lighter brand tint at the top to the full brand colour at the bottom. This technique adds genuine visual depth to backgrounds, buttons, and cards without introducing any secondary hue into the design. It is especially appropriate when strict brand colour consistency is required but a completely flat background would look static. The transition reads as lighting rather than colour change.

Use percentage positions to weight the dominant colour

Moving the second colour stop from 100% to 60% causes that colour to occupy a larger share of the element, with the transition zone compressed into the final 40%. For example, linear-gradient(to right, #667eea 0%, #764ba2 60%) gives the purple roughly two-thirds of the element width. Weighting gradients this way ensures your brand's dominant or most recognisable colour remains the primary visual presence on the element, even within a multi-colour gradient.

Test your two-stop gradient in dark mode

A vivid two-stop gradient that works well on a light background can appear harsh, fluorescent, or low-quality in dark mode because vivid saturated colours create excessive contrast against near-black backgrounds. For dark mode variants, shift both colour stops darker by reducing HSL lightness by 15 to 25 percentage points and reducing saturation by 10 to 20 points. Define both the light and dark variants as CSS custom property values and override them inside @media (prefers-color-scheme: dark) for automatic system-preference-aware switching.

FAQ

Frequently asked questions

The minimal form is: background: linear-gradient(to right, #667eea, #764ba2). Specify the direction keyword first, then two colour values separated by commas. Without explicit stop positions, the browser automatically places the first stop at 0% and the second at 100%, producing an evenly distributed transition from one colour to the other in the stated direction. You can shorten it further by omitting the direction, in which case the browser defaults to a top-to-bottom gradient, though specifying the direction explicitly is always clearer and more maintainable.

Analogous colours, those adjacent on the colour wheel, produce smooth and harmonious gradients: blue-to-purple, green-to-teal, and orange-to-yellow are reliable combinations. Monochromatic pairs using the same hue at different lightness levels produce elegant gradients suitable for brand-consistent designs. High-contrast complementary pairs such as blue-to-orange or purple-to-yellow produce vibrant, attention-grabbing gradients appropriate for CTAs and highlight elements. Avoid colour combinations that produce a muddy or brown midpoint, which commonly occurs with red-to-green transitions in sRGB colour interpolation.

Yes. Add a position percentage after each colour value: background: linear-gradient(to right, #667eea 20%, #764ba2 80%). This configuration starts the transition at 20% from the left edge and completes it at 80%, keeping the first colour solid for the initial 20% of the element and the second colour solid for the final 20%. The blend occupies only the middle 60%. Adjusting these positions gives you precise control over how much visual weight each colour carries across the element surface.

Two approaches work equally well. You can change the direction: replace "to right" with "to left", or replace 135deg with 315deg (add 180deg to reverse any angle). Alternatively, swap the colour order while keeping the direction unchanged: change linear-gradient(to right, #667eea, #764ba2) to linear-gradient(to right, #764ba2, #667eea). Both methods produce the same visual result. Swapping colours is slightly more intuitive because the direction keyword continues to describe which way the gradient travels across the element.

Yes. rgba() and hsla() values are fully supported in gradient colour stops: background: linear-gradient(to bottom, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.7)). Semi-transparent stops are particularly useful for overlay gradients on images or for layered background compositions where you want the gradient to allow underlying content or background colours to partially show through. Avoid using the bare CSS transparent keyword for a fade-to-clear stop; use the actual colour at alpha 0 instead to prevent grey banding at the midpoint.

If no direction is specified in linear-gradient(), the browser defaults to "to bottom" (equivalent to 180deg), which produces a gradient that runs from the first colour at the top of the element to the second colour at the bottom. The first colour appears at the top and the second at the bottom. This default is rarely what you want for horizontal or diagonal layouts, so always specify a direction explicitly. Common choices are "to right" for horizontal, 135deg for diagonal, and "to bottom right" for a corner-to-corner diagonal that adapts to element proportions.

No, not in any way that matters in practice. CSS gradient rendering is handled by the GPU in all modern browsers, and the computational cost per additional colour stop is negligible. The rendering difference between a two-stop and an eight-stop gradient is imperceptible on any current device. For performance-critical applications, the factors that actually matter are the total number of gradient-background elements on the page at once, whether those elements trigger layout or paint cycles through CSS changes, and the size of the gradient elements, not the number of colour stops within any individual gradient.

Yes, and this is one of the most effective uses of a minimal two-stop gradient. Create a div between the two sections you want to connect and set height: 80px to 120px depending on how gradual you want the transition to feel. Apply background: linear-gradient(to bottom, backgroundColorAbove 0%, backgroundColorBelow 100%) to the divider div. This creates a seamless visual blend from one section colour to the next, eliminating the hard horizontal boundary line that would otherwise appear between sections with different background colours as the user scrolls through the page.

A two-stop gradient is the wrong choice when the gradient endpoints are too visually similar to be distinguishable, in which case the gradient looks like noise rather than design. If your two colours differ by less than 5 lightness units in HSL or are essentially the same hue at the same saturation, the result reads as a flat colour with subtle uneven rendering, which can actually look like a display defect to users. A flat colour is also better when the element is too small to show the gradient transition clearly, such as on icons under 32 pixels or thin border accents under 4 pixels. In those cases, the gradient zone collapses to a single average colour visually and adds CSS complexity without any visual benefit.

CSS gradients are resolution-independent because they are computed by the browser as vector-like fills rather than rasterised images. On high-DPI screens, the gradient is rendered at the device pixel resolution rather than being upscaled from a lower-resolution bitmap, so it stays sharp at any zoom level and any pixel density. This is one of the largest practical advantages over using gradient images, which require multiple-resolution source files served via srcset to look sharp on retina displays. A single CSS gradient declaration renders pixel-perfect on a 1x desktop monitor, a 2x retina laptop, a 3x flagship phone, and a 4K external display, all without any additional CSS or media query handling required to ensure quality.