📝 代码查看
使用runcode.html页面

2
查看次数
2025-12-01
创建时间
2025-12-01
最后更新
<!-- nav meta -->
<div class="demo-meta">
  <h1 class="demo-title">CSS3 Linear Gradient</h1>
  <p class="demo-desc">We can create gradient color with CSS3 and here how to achieve it.</p>
</div>

<!-- demo content -->
<div class="demo-wrapper">

<section id="gradient-1">
<h3>Gradient Start Position</h3>

<div class="gradient top">
	
</div>

<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(top, #ff5a00, #FFAE00);

	/*Browser Syntax*/	
	background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00);	
}
</pre>
<hr>
<div class="gradient bottom">
	
</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(bottom, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(bottom, #ff5a00, #FFAE00);
}	
</pre>

<hr>

<div class="gradient left">

</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(left, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(left, #ff5a00, #FFAE00);
}
</pre>

<hr>

<div class="gradient right">
	
</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(right, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(right, #ff5a00, #FFAE00);
}
</pre>
</section>

<section id="gradient-2">
<h3>Diagonal Gradient</h3>

<div class="gradient diagonal">

</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(45deg, #ff5a00, #FFAE00);	

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
}
</pre>
</section>

<section id="gradient-3">
<h3> Gradient Color Stop</h3>

<div class="gradient color-stop">

</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 51%);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);	
}
</pre>
</section>

<section id="gradient-4">
<h3>Transparent Gradient</h3>

<div class="gradient transparent">

</div>
<h4>Code</h4>
<pre>div {
	/*Official Syntax*/
	background-image: linear-gradient(to bottom,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);

	/*Browser Syntax*/
	background-image: -moz-linear-gradient(top,  rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -o-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -ms-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
}
</pre>
</section>

<section id="gradient-5">
<h3>Mulitple Color Gradient</h3>

<div class="gradient multi-colors">

</div>
<h4>Code</h4>
<pre>div {
	background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
</pre>
</section>
</div>
html {
	background: #f3f3f3;
	height: 100%;
}
.demo-wrapper section {
	max-width: 960px;
	height: auto;
	margin: 20px auto;
	padding: 20px;
}
.demo-wrapper section div {
	width: 950px;
	height: 250px;
	border: 5px solid #fff;
	margin: 30px 0;
}
.demo-wrapper section:target {
	background-color: #ccc;
	border: 1px solid #aaa;
}
pre {
	font-size: 10pt;
}
.demo-meta{ text-align:center;}
#gradient-1 div.top {
	background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: linear-gradient(top, #ff5a00, #FFAE00);	
}
#gradient-1 div.bottom {
	background-image: -webkit-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: linear-gradient(bottom, #ff5a00, #FFAE00);	
}
#gradient-1 div.left {
	background-image: -webkit-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: linear-gradient(left, #ff5a00, #FFAE00);	
}
#gradient-1 div.right {
	background-image: -webkit-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: linear-gradient(right, #ff5a00, #FFAE00);	
}
#gradient-2 div.diagonal {
	background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: linear-gradient(45deg, #ff5a00, #FFAE00);	
}
#gradient-3 div.color-stop {
	background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 51%);	
}
#gradient-4 div.transparent {
	background-image: -moz-linear-gradient(top,  rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -o-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -ms-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: linear-gradient(to bottom,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
}
#gradient-5 div.multi-colors {
	background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
pre{ background:#DDD; padding:7px 10px; }
暂无JavaScript代码

👁️ 实时预览