Question 301840 in CSS Question posted in
Some basic documentation can be found here.

Css – Why is my Linear-Gradient Converted to Solid Background-Color?

I have a simple navbar that I am applying a gradient to, following the example on w3schools (https://www.w3schools.com/css/css3_gradients.asp)

.nav-bar {
    background-image: linear-gradient(to bottom right, var(--primary-bg-color), var(--accent-txt-color));
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

This displays correctly when I preview the file in my browser, but I have the page published on Hostinger, and when I visit the live page on Chrome, the gradient is replaced by a solid color. The gradient works fine in other browsers (I tested using Safari and Edge).

When I inspect the page using the Chrome developer tools, it shows that the style applied is this:

    background-color: var(--accent-txt-color);

I can manually change the style to reflect my published code, which works, but I am confused about why the style is being overwritten in the browser. I do not style the nav-bar anywhere else in my CSS.

Thank you for any help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found that Chrome was caching parts of my website, so the updates I was making to this specific feature were not being loaded when I refreshed my site. Once I cleared my browsing data, everything began working smoothly.

    I was confused because other changes in CSS that I made were displayed. I might have known, because other browsers were displaying correctly, and Chrome has apparently supported linear-gradient without the -webkit- prefix for about a decade (https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#browser_compatibility).

    Anyway, thank you to everyone who saw this and/or responded.


  2. 0 
    background-image: -webkit-linear-gradient(red, green, blue);

    -webkit- is the css prefix for Chrome and Safari. I hope this will solve the problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search