Hello, I’m Joe Vennix, and this is where I blog.

I am a twenty year-old CS student at the University of Texas. I work as a developer and a designer. I am currently interning at Metasploit, where I get to work with awesome tools like Rails, Coffeescript, and SASS to develop the user interface to the Metasploit Pro product. My past work includes writing iPhone apps, designing and coding websites, and creating custom software. My products have been featured on national commercials, billboards, and magazines.

I am currently busy with school and contracting, but from time to time I will post a personal project up here.

Twitter / Facebook / Github

Add a spotlight “sheen” to your backgrounds with CSS3

Posted on 29 Jun 2011

Recently when building an admin panel for a client, I decided to add a spotlight sheen effect to the background for a sleeker look. Here's a snap of the completed design:

Here's the CSS(3) that I used to do it. The "sheen" is really just a radial gradient that tapers from a transparent white to full transparency:

background:-webkit-gradient(radial, 250 50,0,250 50,800,
            from(rgba(255,255,255,.4)),to(transparent)) transparent;
background: -moz-radial-gradient(250px 50px, 
            rgba(255,255,255,.4), transparent) transparent;

The effect is applied to a #wrap div, which lies directly on top of the body.