Angular 12 CSS not right

Question

I have the following css in my angular Component

.folders {
  border-left: 5px solid #b8744f;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px #fff;

  /*START*/
  background: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#327aa4),
    color-stop(45%, #2e4b5a),
    to(#5cb0dc)
  );
  /*END*/

  background: -moz-linear-gradient(
    top,
    rgba(50, 123, 165, 0.75),
    rgba(46, 75, 90, 0.75) 50%,
    rgba(92, 176, 220, 0.75)
  );
  border: solid 1px #102a3e;
  box-shadow: inset 0 0 1px #fff;
  display: inline-block;
  overflow: visible;
}

The part marked between the comments START and END are not right as per the IDE. It keeps complaining like the following:

Mismatched parameters ([linear | radial] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)

-webkit-gradient is not working in angular 12 It keeps pointing to a parameter

Answer 1

Use linear-gradient:

html, body {
  width: 100%; 
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(
    #327aa4,
    #2e4b5a 45%,
    #5cb0dc
  );
}

CSS vendor / browser prefixes like -webkit or -moz are not necessary and makes the code messier and you repeat yourself (DRY). I recommend to use Angular with SCSS. Angular supports it out of the box.

If you want to rotate the gradient (e.g. horizontal) you can add the value 90deg. See the docs and web.