<div class="najma"></div>
.najma {
position: relative;
width: 250px;
height: 250px;
margin: 50px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.najma:before,
.najma:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.najma:before {
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
background-size: 100% 20px;
/*www.najmacode.com
==================== Gradient*/
background-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -webkit-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
background-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -moz-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
background-image: -o-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -o-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
background-image: linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), linear-gradient(to left, #3a4ed5 0%, #3a8ed5 100%);
}
.najma:after {
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 20px 100%;
-moz-background-size: 20px 100%;
background-size: 20px 100%;
/*www.najmacode.com
==================== Gradient*/
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -webkit-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -moz-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
background-image: -o-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -o-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a8ed5 100%), linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.