CSS Create Color Gradient

Generating a css gradient with single color

You can use alpha channel for this purpose. Consider color "#428383":

div {  background-color: #428383; /* for browsers without gradient support */  background: linear-gradient(#42838344, #428383ff);  width: 100px;  height: 100px;}

<div></div>

How do you make a gradient background in css?

Use this in your CSS:

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);

Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?

mask combined with linear-gradient can do it:

.box {
  height: 200px;
  width: 300px;
  background: linear-gradient(to right, rgb(238, 252, 83), rgb(120, 239, 197))
}
.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215));
  -webkit-mask: linear-gradient(to bottom,#0000, #000);
          mask: linear-gradient(to bottom,#0000, #000);
}

<div class="box"></div>

Generate solid colors using CSS linear-gradient (not smooth colors)

Like this

.gradient {  width: 500px;  height: 200px;  background: linear-gradient(to right,       red    20%,       green  20%,       green  40%,       blue   40%,       blue   60%,       purple 60%,       purple 80%,       yellow 80%,      yellow 100%  );}

<div class="gradient"></div>

How to create a gradient with 3 colors in CSS without color escalation

Sure, just add color stops at every (100/numColors)%

div {  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);  width: 100%;  height:64px;}

<div></div>

Replicating a 5-color CSS gradient

You were really close, start anticlockwise from the left bottom color,

and don't use mix-blend mode- to get rid of artifacts.

body {  
  font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
  min-height: 150vh;
  padding: 2em;
  margin: 0;
  color: hsla(0, 0%, 100%, 0.85); 
  
  background-color: #170d24;
  background-image:
    radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
    radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}

<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>

Is it possible to create a CSS linear gradient for text with specific transition width?

Yes you can, by assigning the starting point and ending point(40% and 60% for example):

background: linear-gradient(#f9f876 40%, #82f7d6 60%);

body {
  background-color: magenta;
}

h1 {
  background: linear-gradient(#f9f876 40%, #82f7d6 60%);
  background: -webkit-linear-gradient(#f9f876 40%, #82f7d6 60%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

<h1>DOLCE'S DOLLHOUSE</h1>