CODEWITHSUNDEEP
cssgradient
surfs up
surfs up

Reputation: 73

create "shiny" effect using css gradient

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/

Upvotes: 2

Views: 24116

Answers (6)

Tal Tarablus
Tal Tarablus

Reputation: 11

I've found this simple child element + SCSS pair to be the best looking one:

HTML [class || className]:

<div class={`full-indicator`}>
  <div class={`indicator-shine`}></div>
</div>

SCSS:

.full-indicator {
      transition: 0.25s ease-in-out;
      width: 0px;
      height: 0px;
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: #ff5050;
      border-radius: 50%;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.95);
      z-index: 2;
      
      .indicator-shine {
        width: 5px;
        height: 5px;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
        border-radius: 50%;
        top: 15%;
        right: 25%;
      }
    }

This was made for a "full status indicator", customize left/right and top/bottom, size and color for your own needs.

Hope this will be handy for someone!

Upvotes: 0

Allan Guwatudde
Allan Guwatudde

Reputation: 553

Check this codepen out

HTML

<div class="shiny"></div>

CSS

.shiny {
  width: 100%;
  height: 50px;
  background-color: #E6E9EA;
  overflow: hidden;
 }

.shiny::before{
 display: block;
 content: '';
 width: 50%;
 height:100%;
 transform: translate(50%);
 background-image: linear-gradient(to right, transparent, white, transparent);
 animation-name: shining;
 animation-duration: 3s;
 animation-iteration-count: infinite; 
}

@keyframes shining {
from {
 transform: translate(-50%);
}
to {
 transform: translate(100%);
}

}

Upvotes: 1

Amr
Amr

Reputation: 593

.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>

Upvotes: 6

JacobG182
JacobG182

Reputation: 329

.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%);
}

Upvotes: 1

Sobin Augustine
Sobin Augustine

Reputation: 3775

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));
}

Upvotes: 7

W.K.S
W.K.S

Reputation: 10095

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));

Upvotes: 1

Related Questions