Beautiful sunset wallpaper using only CSS3

by on 22/04/10 at 10:56 pm

Hello Friends ,

As we all know that CSS3 have some amazing features. So today I have decided to make some simple wallpaper using only CSS3 . And after devoting 1 and 1/2 hour with CSS3 I came up with this simple wallpaper. Below I have attached snapshot of the wallpaper , to view the original output visit DEMO ( although for now it is only visible in CHROME web browser).

CSS3 wallpaper

For the above wallpaper I have used only CSS3 and some divs.

CODE :

HTML

      <div class='sky-middle'></div>
      <div class='sky'></div>
      <div class='blue-orange'></div>
      <div class='orange-red'></div>
      <div class='sun'>
         <div class='innerSunClass'></div>
     </div>

CSS

 .sky{
     width:100%;
     height:50%;
     background-image:-webkit-gradient(linear,4% 0%,5% 85%,
               from(#111), to(#506387), color-stop(.6,#3F3560));
    }
 .sky-middle{
     width:968px;
     height:50%;
  background-image:-webkit-gradient(radial,-100 150,175,300 175,40,
                from(#470705), to(#506387), color-stop(.4,#3F3560));
     opacity:.2;
     position:absolute;
 }
 .blue-orange{
     height: 100px;
     width: 100%;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
            from(#506387), to(#A81C1C), color-stop(.6,#A4502A));
  }
 .orange-red{
     height: 200px;
     width: 100%;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
             from(#A81C1C), to(#5C3939), color-stop(.6,#5C3838));
}
.sun{
    width:200px;
    margin-top:-250px;
    margin-left:49%;
    height:60px;
    overflow:hidden;
}
.innerSunClass{
    border:medium none;
    height:100px;
    width:100px;
    margin-top:15px;
    margin-left:15px;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                  from(#fff), to(#A81C1C), color-stop(.4,#A81C1C));
  -webkit-border-radius:50px;
}

As per now this example works only on Chrome web browser.To see the original file visit DEMO.
Please don’t forget to drop some comments.
Thanks.

10 Responses to “Beautiful sunset wallpaper using only CSS3”

  1. [...] This post was mentioned on Twitter by nikeshhayaran, Nitin Hayaran. Nitin Hayaran said: Beautiful Sunset Picture using only CSS3 and no Images : Power of CSS3 : http://goo.gl/4mhc [...]

  2. Vivek

    Apr 23rd, 2010

    Awesome buddy , I knew about gradients & shapes in CSS3 but you produced a live example Kudos :)

  3. admin

    Apr 23rd, 2010

    thanks vivek…

  4. SuperSonic

    Apr 29th, 2010

    ЎHola!
    Estб not sure this is true:) but thanks to a post.

    SuperSonic

  5. ayliecy

    Apr 29th, 2010

    nice example .. keep it up …

  6. Deepak kaletha

    May 1st, 2010

    impressive example

  7. ivan

    Nov 3rd, 2010

    Nice and funny :-)
    You inspired me to make my own sunset: http://uglydesign.freehostia.com/design/sunset/sunset2.html

  8. high quality pictures

    Apr 19th, 2011

    these are very nice and beautiful wallpapers..i really liked it.thanks to share with us…

  9. Kavitkar uttam

    Apr 22nd, 2012

    awesom yaar

Leave a Reply