How to Create Shine Effects on Your Website Logo With CSS

Recently I was working on one of my UAE based client’s website. In review phase, they demanded a shiny effects on logo. At first I though I should go with GIF animations, should I use Photoshop and edit the logo with shine effects and make Gift animation slides? It was so tricky and was not good idea for me as being developer.

Well, I have googled about CSS animation effects and thought about some CSS tricks website may help to create shining on logo or on any photo. I saw many snippets, stackoverflow codes. I have tried but they could not satisfy me.

At last, I’ve found Keral Patel‘s post about how to achieve shine effect on logo. It was in pure CSS and really helpful. And I though I should share with my audience and it must be good solution rather than spending so much time on Adobe Photoshop or GIF makers.

So to start with it you must have a container DIV to achieve the result. If you don’t use container then the shine effect wont be responsive in true sense. As it may messes up the screen by showing horizontal scrollbar during animation on small devices.

The logo image should be inside the container DIV.

For example:

<div id="logo">
<img src="yourlogo.png">
</div>

Where “logo” is the ID of your container DIV.

For this tutorial I am assuming your logo is 250px wide x 100px tall.

#logo {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100px;
overflow: hidden;
}

#logo img {
width: 100%;
}

Here we have container with given width and height and the logo is with 100% width.

The Animation part is as below:

#logo:before {
content: '';
position: absolute;
top: 0;
left: -100px;
width: 70px;
height: 100%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

Animation name is for the reference. Animation duration and delay etc you can play with to achieve the desired effects. Infinite will keep playing the animation and alternate will keep playing animation from start to end and end to start. Background is semi transparent gradient overlay block.

The animation name was defined already. So here you go,

@keyframes slide {
  0% {
    left: -100;
    top: 0;
  }
  50% {
    left: 120px;
    top: 0px;
  }
  100% {
    left: 290px;
    top: 0;
  }
}

Note that the left: values you can play with. This was working perfect for me with 250 width image. If you have larger or smaller logo then try commenting out the overlay:hidden; part from the CSS and you can adjust the shine part to suit your needs. Once you are satisfied just uncomment the overlay:hidden; part.

Don’t thanks to me, Say thanks to Keral Patel. Don’t forget to share your thoughts below.

Leave a Reply Cancel reply