posted on:February 27, 2008

Soft Edge Technique Soft Edges and Opacity Gradients for Images


With this article CSSG continues to provide image manipulation techniques. The trick I am about to demonstrate creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create “cloudy” soft edges or one-side opacity gradients without any image editing software.

Take a look at the Demo
| Download Soft Edge


Opacity gradients can be turned on and off for all 4 sides of the image separately. With simple configuration you are able to control number of steps of the gradient, step’s width in pixels and, as mentioned, what sides of the image you want to have gradients applied to.

How does this technique work

This is unobtrusive script so it means that no interventions in the html code are necessary, except for class naming to select specific images. If you decide to apply this to all content images then you don’t even have to add class names. The script will collect all content images on your page and apply this script to them.
Based on the settings from configuration area in JavaScript file, script locates the images, creates a loop where it puts one image on top of the other. First image has opacity set to minimum value while last added image is not transparent. At the same time, using CSS clip property, images are clipped progressively, first image not being clipped at all, while last image (the one on the top) is the most clipped.

soft edge scheme


To use this trick, download the JavaScript file and link to it from your html page.

<script type="text/javascript" src="softedge/softedge.js"></script>

There is a configuration area in the JS file where you can edit settings and achieve various effects.

// css class of images that you want to apply this script to
// if you want to apply this script to all content images, leave this string blank

var imageClass = "";

// integer defining the soft edge depth 
// the larger the number the softer the edges :)

var step = 20;

// define directions wher you want gradient to appear 
// set top, right, bottom and left to true or false to turn it on or off
// setting all 4 directions to true will give you soft edge effect
// while setting one of the 

var dirTop = false;	
var dirRight = true;	
var dirBottom = false;	
var dirLeft = true;	

// integer defining each step's width in pixels

var stepWidth = 1;

Enjoy! 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (12 Comments)

  1. Catar4x
    February 27, 2008

    Very good script ! I love this web site !
  2. Dejan
    February 27, 2008

    great thanks
  3. Marcelo
    February 28, 2008

    Awesome like always use to be!
  4. Steph
    February 28, 2008

    Wow, that's really crazy... I can't believe that's possible *glare*
    February 29, 2008

    Great job on this one!
    March 14, 2008

    The best, thanks for that...
  7. John Macpherson
    March 22, 2008

    Impressive little bit of Javascript, impressive stuff!
  8. nh
    May 29, 2008

    Very useful tips. Thanks
  9. Charles Twister
    June 14, 2008

    >Awesome like always use to be! No, don't speak this. Gradients are pretty good for many web-design solutions. I like this web-archive!
  10. äkkilähdöt
    June 24, 2008

    Great tips.Thanks.
  11. jaon
    December 23, 2008

    hey the script works great...i'm kind of new and was wondering how i can get the script to apply to all my images but leave the images in my table instead of piling them up in the corner of my webpage. sorry for the dumb question but i just can't figure it out on my own.
  12. Dale Larsen
    June 11, 2009

    This is a great, I really think you should turn this into a tinyMCE plugin. That way people could apply this to selected code in an easy manner, and... anything you turn into a plugin becomes something that brings traffic to your site. Also, this would make a great jQuery plugin. From my searching around I can see tha ta lot of people are looking for solutions for things like this.

Sorry, the comment form is closed at this time.