Create soft edges on images using simple Javascript and CSS
Written by Alen Grakalic, brought to you by Css Globe
Features
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.
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.
Read more about Soft Edge.
Test it yourself
| Step Width | |||
Donec et mi at augue congue pellentesque. Donec sem dolor, imperdiet sollicitudin, faucibus ut, euismod a, magna. Vestibulum tincidunt pulvinar quam. Etiam ligula nunc, ullamcorper a, tincidunt eget, condimentum vel, velit. Morbi ac eros. Aenean fermentum, augue eu tempus lobortis, elit tellus cursus ipsum, quis iaculis arcu ipsum accumsan magna. Maecenas non nibh. Cras scelerisque lorem sit amet justo. Donec laoreet justo. Nullam a felis et massa lacinia dignissim. Fusce varius semper dolor. Nam pulvinar, elit id ultricies auctor, libero magna mollis metus, non porta eros mi id magna. Morbi aliquet lorem et leo. Sed euismod placerat diam. Proin auctor, nibh non hendrerit mattis, nisl justo ornare dui, eget varius purus tellus quis orci. Morbi rutrum malesuada lorem. Aenean pulvinar, sem eu lobortis aliquet, nunc leo blandit eros, vitae condimentum nisl eros ut elit. Sed gravida ligula quis nisl. Praesent sagittis sollicitudin lacus. Etiam lobortis.
Read more about Soft Edge
Soft Edge is brought to you by Css Globe