CSS Gradient Not Showing Up? Here's Why and How to Fix It

You write a perfectly reasonable background: linear-gradient(...), save the file, refresh the browser, and see nothing. No error in the console, no red underline in your editor. The element just sits there, flat and colorless. This happens more often than it should, and the cause is almost always one of a small set of well-known mistakes. This guide covers each one, explains why it happens, and shows the exact fix.

Last updated: July 2026

The Most Common Reason: The Element Has No Height

A gradient is a background image, not a color. If the element containing it has no defined height and no content to push it open, the browser renders a box with zero height. A zero-height box shows nothing, even if the gradient syntax is perfect.

This trips up developers most often on div elements. A div is block-level but takes only as much height as its content. If it is empty, it collapses.

How to fix it

• Add an explicit height: height: 200px; or min-height: 200px;
• Use height: 100vh; for full-viewport sections
• Add padding so the content expands the box: padding: 2rem;
• On a flex or grid container, make sure children are actually present

Quick diagnostic: open DevTools, inspect the element, and check its computed height. If it reads 0px, the element is collapsing. Fix the height first, then check whether the gradient appears.

Using background-color Instead of background or background-image

This is a syntax mistake that produces no browser warning. background-color accepts a single color value. If you paste a gradient function there, the browser ignores the entire declaration silently.

/* Wrong */
background-color: linear-gradient(to right, #ff6b6b, #feca57);

/* Correct */
background: linear-gradient(to right, #ff6b6b, #feca57);
/* or */
background-image: linear-gradient(to right, #ff6b6b, #feca57);

Use background (shorthand) or background-image. Either works. The shorthand is more common in practice because it is shorter and resets other background sub-properties at the same time.

A Later Rule Is Overriding Your Gradient

CSS cascades. If a stylesheet loaded after yours, or a more specific selector in the same stylesheet, sets a solid background or background-color, it can wipe out your gradient. This is especially common when working inside a CSS framework like Bootstrap or Tailwind, which set their own background utilities.

How to diagnose it

1. Open DevTools and click on the element.
2. In the Styles panel, look for your gradient rule. If it has a strikethrough, it is being overridden.
3. Identify which rule is winning and either increase your selector specificity or remove the conflicting rule.

A quick but not always appropriate fix is adding !important. A better fix is tightening your selector. For example, change .card to .hero .card if the context allows it.

Gradient on Text Is Invisible Without Clip and Color Reset

Applying a gradient to text requires three CSS properties working together. Forgetting any one of them leaves the text either invisible or showing a solid color.

/* All three lines are required */
background: linear-gradient(to right, #6a11cb, #2575fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

• background: sets the gradient as the background of the element
• -webkit-background-clip: text clips the background to the shape of the text characters
• -webkit-text-fill-color: transparent makes the actual text fill transparent so the background shows through

If you skip -webkit-text-fill-color: transparent, the solid text color sits on top of the gradient and hides it completely. If you skip the clip, you see the gradient behind the text, not inside it. Note that background-clip: text (without the -webkit- prefix) now has broad support, but the -webkit- prefixed version is still needed for Safari compatibility as of 2026.

If you want to check that your gradient text still passes readability standards when placed on a page, run the colors through EveryFreeTool's contrast checker to verify legibility against surrounding backgrounds.

Missing or Malformed Gradient Syntax

The gradient functions have strict syntax. A missing parenthesis, a comma in the wrong place, or an invalid color value causes the entire declaration to be dropped. Common mistakes include:

• Writing linear gradient with a space instead of linear-gradient
• Using to right top instead of the correct to top right for diagonal directions
• Forgetting the degree symbol: writing 90 instead of 90deg
• Using an invalid hex color like #GGG instead of a valid value like #CCC
• Omitting the closing parenthesis on the function

The fastest way to avoid all of these is to generate the gradient visually. EveryFreeTool's CSS gradient generator outputs syntactically valid CSS every time, so you can copy it directly into your project without worrying about a typo breaking the rule silently.

The Gradient Is There But Invisible Because the Colors Are Too Similar

If you set both color stops to nearly identical values, the gradient renders correctly but looks like a flat color. This is not a bug. It is worth checking when you are sure the syntax is right but the element looks wrong.

Use EveryFreeTool's color picker to confirm the exact hex values you are using. If the lightness values are within a few percentage points of each other, increase the contrast between stops. A color palette generator can help you find stop colors that are visually distinct but still harmonious.

Gradient Behind an Image or Pseudo-element Is Hidden

Sometimes a gradient is correctly applied but is completely covered by another element. Two situations cause this frequently:

A background image is stacking on top

When you use the background shorthand to add both a background image and a gradient, the order matters. CSS background layers stack with the first value on top. If your image is listed first, it covers the gradient.

/* Image covers gradient entirely if the image is opaque */
background: url(photo.jpg), linear-gradient(to bottom, #000, #333);

/* Put gradient first if you want it visible when image is absent */
background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8)), url(photo.jpg);

A pseudo-element is covering the gradient

If a ::before or ::after pseudo-element is positioned over the parent without a transparent background, it blocks the gradient from view. Check z-index stacking and the background of any pseudo-elements on the element.

Vendor Prefix Issues on Older or Niche Browsers

Modern browsers handle unprefixed gradients without issue. However, if you are supporting very old WebKit builds or a browser with unusual rendering, the unprefixed syntax may not work. Adding the -webkit- prefix as a fallback covers most edge cases:

background: -webkit-linear-gradient(left, #ee0979, #ff6a00);
background: linear-gradient(to right, #ee0979, #ff6a00);

Always put the standard (unprefixed) declaration last so it overrides the prefixed version in browsers that support both.

A Practical Debugging Checklist

When a gradient is not showing, go through these steps in order:

1. Inspect the element in DevTools. Confirm its computed height is greater than zero.
2. Check that you used background or background-image, not background-color.
3. Look for strikethrough rules in DevTools that indicate the gradient is being overridden.
4. Paste your CSS into a gradient generator to confirm the syntax is valid.
5. If applying to text, confirm all three required properties are present.
6. If using a background image alongside the gradient, check the stacking order.
7. Check for pseudo-elements or absolutely positioned children that may be covering the element.

Working through this list resolves the problem in nearly every case. If the gradient still does not appear after all seven steps, copy the element's full computed styles from DevTools and test it in a blank HTML file to isolate the issue from framework styles.

For building and testing gradients quickly without writing CSS by hand, the CSS gradient generator on EveryFreeTool is a reliable starting point. It generates clean, ready-to-paste code for linear, radial, and conic gradients.