create "shiny" effect using css gradient
18,749
Solution 1
Check this, Is this what you are looking for. jsFiddle demo
HTML
<div class="d shine"></div>
CSS
.d {
width: 300px;
height: 500px;
background: #111;
}
.shine:before {
content:"";
position:absolute;
width: 300px;
height: 500px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}
Solution 2
.btn {
position: relative;
width: 150px;
text-align: center;
padding: .61538462em 1em;
cursor: pointer;
vertical-align: middle;
color: #FFF;
border: 1px solid #07c;
border-radius: 2px;
background-color: #0095ff;
box-shadow: inset 0 1px 0 #66bfff;
}
.shiny::after {
content: '';
display: block;
width: 70%;
background: rgba(255, 255, 255, 0.2);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Firefox 3.6-15 */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Standard syntax */
left: -100%;
top: 0;
height: 100%;
position: absolute;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
}
.shiny:hover::after {
left: 150%;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
}
<div class="btn shiny">Hover Me</div>
Solution 3
Try this:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
Solution 4
.background {
background-image: linear-gradient(right, #111 11%, #333 56%);
background-image: -o-linear-gradient(right, #111 11%, #333 56%);
background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
background-image: gradient(right, #111 11%, #333 56%);
}
Author by
surfs up
Updated on June 05, 2022Comments
-
surfs up almost 2 years
Is it possible to create a gradient like that of the shiny effect on the iphone in the link below using only css?
http://prntscr.com/22oa4f
I've tried using the following code but it isn't "shiny"background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
I've created a container in this jsfiddle -> http://jsfiddle.net/3qWYL/
-
Mr_Green over 10 yearsermhh.. it looks shiny to me on chrome.
-
surfs up over 10 yearsactually, that is not shiny enough
-
Sobin Augustine over 10 yearsTry changing the color,opacity and position to get your desired result.
-
jay_t55 over 9 yearsThis doesn't work in IE 11 on Windows 10 Tech Preview.
-
Slbox about 7 yearsHow do you use degrees instead of
left top
/right bottom
If you want to change the angle of the gradient in that example? I cannot find a way that works.