Abdul Abdul - 30 days ago 8
HTML Question

How to Get two dimensional Gradiant with multicolors on top

Is it possible to create say a two dimensional gradiant like the following image?

enter image description here

Currently, i can achieve only one of the following two i.e to right Or bottom

background: rgba(247,149,29,1);
background: -moz-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(247,149,29,1)), color-stop(16%, rgba(247,149,29,1)), color-stop(17%, rgba(237,28,35,1)), color-stop(33%, rgba(237,28,35,1)), color-stop(34%, rgba(43,56,144,1)), color-stop(56%, rgba(43,56,144,1)), color-stop(56%, rgba(27,118,188,1)), color-stop(57%, rgba(27,118,188,1)), color-stop(73%, rgba(27,118,188,1)), color-stop(73%, rgba(0,167,156,1)), color-stop(100%, rgba(0,167,156,1)));
background: -webkit-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -o-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -ms-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: linear-gradient(to right, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 20%, rgba(237,28,35,1) 20%, rgba(237,28,35,1) 40%, rgba(43,56,144,1) 40%, rgba(43,56,144,1) 60%, rgba(27,118,188,1) 60%, rgba(27,118,188,1) 80%, rgba(0,167,156,1) 80%, rgba(0,167,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7951d', endColorstr='#00a79c', GradientType=1 );



  1. enter image description here

  2. enter image description here



I want to get a right bottom gradient with mutli color on top and black on bottom.

Answer Source

Here are a couple of possible variants:

1- Using Multiple Backgrounds:

We can draw this shape by applying multiple background images on a div element and by precisely controlling their size.

Consider the following styles:

background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%,
                                            #ed1c24 40%, #2b3990 40%,
                                            #2b3990 60%, #1b75bc 60%,
                                            #1b75bc 80%, #00a79d 80%),
                  linear-gradient(#333, #333);

background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;

We are using CSS3 linear-gradient() to create 2 different background images and we have used background-size property to limit the size of first image.

Note: The order of images in background-image property is important. Change in the order wouldn't produce the desired output.

Output Image:

Output Image

Working Demo:

.box {
  height: 100px;
  background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%),
                    linear-gradient(#333, #333);
  background-size: 100% 8px, 100% 100%;
  background-repeat: no-repeat;
  padding: 20px;
}
<div class="box"></div>


2- Using Pseudo Elements:

We can draw top border using a pseudo element.

  • Create a layer with ::before or ::after pseudo element and place it on above the parent element with position: absolute.
  • Create the desired background using CSS3 linear-gradient and apply this on the layer create above.

Working Demo:

.box {
  position: relative;
  background: #333;
  padding: 20px;
  height: 60px;
}

.box::before {
  background: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%) no-repeat;
  position: absolute;
  content: '';
  height: 8px;
  width: 100%;
  left: 0;
  top: 0;
}
<div class="box"></div>