Treehouse: Grow your CSS skills. Land your dream job.

Transparent gradient over image

  • # September 8, 2012 at 2:29 pm


    I’m trying to get this Apple iPhone reflection effect to my site, but I also want an image “behind” the reflection.
    I also want this reflection to fade away in a specific angle but the reflection doesn’t even show.


    background-image: url( no-repeat center center,
    -webkit-linear-gradient(15deg, #000 80%,rgba(255, 255, 255, 0.3) 80%);


    The site

    # September 8, 2012 at 2:57 pm

    Please put your HTML / CSS in Codepen. It will let us play with it.

    You will have to have the images on a live webserver so we can view them. I use Photobucket but if you have a live site that will work as well.

    # September 8, 2012 at 3:00 pm

    Oh sorry xD

    This is the path: “url(”

    # September 8, 2012 at 3:13 pm

    Here’s the codepen:

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.