CSS JQuery: Nice looking linear gradient background

<html>
<head>
<title>MaHiiii : CSS : Linear Gradient Background</title>

<style type="text/css">

html
{
height: 100%;
background-color: #f095ee;

background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));

background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

-webkit-background-size: 400px 400px;
-moz-background-size: 400px 400px;
background-size: 400px 400px;
}
</style>
</head>
<body>

</body>
</html>

Output :)

CSS JQuery

Monday, October 13, 2014

Nice looking linear gradient background

No comments:

Post a Comment