whose property can be a gradient pattern or a css color code example

Example 1: gradient image css

#show_bg_2 {
 
background-image:
  /*two color gradient over an image*/
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), 
rgba(117, 19, 93, 0.73)),url('images/background.jpg');
 
width: 80%;
height: 400px;
background-size: cover;
}

Example 2: 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