gradient css tricks code example

Example: create css 3d gradient

<!DOCTYPE html>
<html>
<head>
	<title>CSS 3D Box Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
  	<style>
    .box {
	position:relative;
	width:600px;
	height:300px;
	margin:100px auto 0 auto;
}

.box-gradient {
	position:absolute;
	width:100%;
	height:100%;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
}

.box-shadow {
	position:absolute;
	left:50%;
	margin:400px 0 0 -290px;
	bottom:10px;
	width:580px;
	height:16px;
	background:#fff;
	border-radius:290px / 8px;
	-moz-border-radius:290px / 8px;
	-webkit-border-radius:290px / 8px;
	box-shadow:0 10px 20px #000;
	-moz-box-shadow:0 10px 20px #000;
	-webkit-box-shadow:0 10px 20px #000;
}
  
   <style>
</head>

<body>
	<div class="box">
		<div class="box-shadow"></div>
		<div class="box-gradient">
			...some content can go here...
		</div>
	</div>
</body>
</html>

Tags:

Html Example

Recent Posts