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

by

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>

CSS 4 colors gradient

Another kind of coloration:

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

CSS linear gradient inside linear gradient

More Related Contents:

  1. Using percentage values with background-position on a linear-gradient
  2. Use CSS3 transitions with gradient backgrounds
  3. How to remove the stripes that appears when using linear gradient property [duplicate]
  4. Border Gradient with Border Radius
  5. Semi-transparent color layer over background-image?
  6. Background color of text in SVG
  7. How to add a color overlay to a background image? [duplicate]
  8. CSS: Set a background color which is 50% of the width of the window
  9. CSS3 cross browser linear gradient
  10. Gradient text color
  11. How does border-image work with linear-gradient?
  12. What is the difference between background and background-color
  13. background image, linear gradient jagged edged result needs to be smooth edged
  14. Why does the linear-gradient disappear when I make an element position:absolute?
  15. Is background-color:none valid CSS?
  16. SVG gradient using CSS
  17. Background with 2 colors in JavaFX?
  18. CSS: background image on background color
  19. Blocky gradient effect in CSS3
  20. How can I remove the gloss on a select element in Safari on Mac?
  21. How can I prevent CSS gradient banding?
  22. Can you add noise to a CSS gradient?
  23. How to make radial gradients work in Safari?
  24. Is it possible to change only the alpha of a rgba background colour on hover?
  25. How to add animated gradient to an svg path?
  26. CSS gradient checkerboard pattern
  27. How to make div background color transparent in CSS
  28. Combining :last-child with :not(.class) selector in CSS
  29. CSS blur on background image but not on content [duplicate]
  30. Safe width in pixels for printing web pages?

Leave a Comment