Html Question posted in
Some basic documentation can be found here.

Html – How can I get my linear-gradient to look consistent on Chrome and Firefox

This is what it looks like on Chrome
This is what it looks like on Firefox

Here is my CSS chunk:

.color-legend {
  width: 100px;
  height: 20px;
  background: 
    linear-gradient(
      to right in oklch decreasing hue, 
      oklch(100% 0 9) 6% 6%, 
      oklch(0% 0.5 15) 93% 93%
    ); 
}

I need for them both to look like the Chrome version.

I tried using -moz-linear-gradient and I tried add multiple colors to the gradient but neither solved the issue

Tags:

2

Answers


  1. 0

    Added a Fallback block and it works for chrome. Please see the below code,

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Test</title>
    <style>
        .color-legend {
            width: 100px;
            height: 20px;
            background: 
                linear-gradient(
                    to right, 
                    hsl(0, 100%, 50%) 6%, 
                    hsl(120, 100%, 25%) 93%
                ); /* Fallback */
            background: 
                linear-gradient(
                    to right in oklch decreasing hue, 
                    oklch(100% 0 9) 6% 6%, 
                    oklch(0% 0.5 15) 93% 93%
                );
        }
    </style>
</head>
<body>
    <div class="color-legend"></div>
</body>
</html>

    enter image description here

    Login or Signup to reply.
  2. 0

    Maybe try using RGBA colors? I tried the RGBA version for a simple span element, and it works for both chrome and Firefox. You could, of course, go to the "Inspect" option in both browsers and see how it is reading the style.

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

Back To Top
Search