How to display the CSS gradient generated by Illustrator?

As a designer I can extract this CSS code from Illustrator:

.test
    {
      background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
      background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
      background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
      background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      position : absolute ;
      left : 215px;
      top : 151px;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
    }

I tried in the browser like this:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>test</title>
    <style type="text/css">
        /* css code here */
    </style>
 </head>
 <body>
    <div class="test" id="test"> </div>
 </body>
</html>

What am i missing?

It is a gradient rectangle, is should look like this:

Solution

You need to set the width and height of the element with the gradient applied to it in the CSS:

.test {
      background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
      background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
      background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
      background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      position : absolute ;
      left : 100px;
      top : 50px;
      width:300px;
      height: 150px;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}

<div class="test" id="test"> </div>