Home / Questions / 313126
Accepted
EduBw
Asked: 2020-12-03 05:50:17 +0800 CST 2020-12-03 05:50:17 +0800 CST

gradient color css html

  • 772

I want to form a kind of progress bar that gradually degrades the main color.

Starting from red, to a very light red and finally white.

such a thing

enter image description here

Imagine that the yellow is a light red (I don't know how to do it with paint.)

The case I have in my html:

.rojo{
  width:600px;
  height: 200px;
  background-color:#F54021;
  background:linear-gradient(left, #F54021, 60%, #D95030, 30%, white , 10%);
}
<div class="rojo">
</div>

The problem when executing that the entire bar is red, it does not do any gradient and I have also noticed that it only takes this line

background-color:#F54021;

If I put black or blue or whatever it will be the final color of the bar...

Edit : The gradient goes from the left to the right.

Thank you

html

3 Answers

  1. As I have put you in the comment today it is easy to find some tool/web with which we can create visually (in this case a gradient to later obtain the CSS, they can be found by " css gradient generator ". (There are also others very common which are for shadows "css shadow generator").

    The generator will return various css to be compatible with different browsers.

    linear-gradient

    This answer is based on the CSS linear-gradient() function and you can also see browser compatibility

    linear-gradient([<angle> | to <side-or-corner> ,]? <color-stop>[[<stop-position]] [,<color-stop>[<stop-position]])

    For your example the simplest code would be:

    background: linear-gradient(to right, red, white);

    The color-stopor color stops are optional so we can have 2 (less doesn't make sense in a gradient) or n. Similarly the stop-positiono position of the stop are also optional. The first and last stops default to 0%and 100%, and the rest default to half between the previous stop and the next(parada|parada|parada)==(0%|50%|100%)

    Which is the same as:

    background: linear-gradient(90deg, red 0%, white 100%);


    .rojo{
    width: 100%;
    height: 200px;
    background: linear-gradient(to right, red, white);
}
    <div class="rojo">
</div>

    • 6
  2. Best Answer

    This is an example of the gradient, apply it to your project

    <!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; 
  background-image: linear-gradient(to right, #FF0000, #FF3633, #FE615E);     }
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

    ;

    • 4

  3. The arguments to linear-gradientare wrong, so the browser will ignore the entire background-image. If it were right, the definition background-colorwould be unnecessary.

    The correct way is:

    .rojo {
  width:600px;
  height: 200px;
  /* background-color:#F54021; */
  background-image: linear-gradient(to right, #F54021, #D95030 60%, white 100%);
}
    <div class="rojo"></div>

    In linea-gradient, the address ( to right) goes first. Then the start color ( #F54021), followed by the color stoppers . #D95030 60%indicates that the gradient is done #D95030when reaching 60% of the route. Note that it is separated by a space, not a comma.

    • 3