Sharpen images with CSS (filters)


Is there a sharpen filter in css for images,
the blur filter works fine as demonstrated here:

Maybe something can be done with the custom filter?
Who is Participating?
Ishaan RawatConnect With a Mentor Designer | Developer | ProgrammerCommented:
OK... as you wish...
The default rendering of an image is the sharpest it can be in a given browser.  To get it sharper would require detailed re-touching in a graphics program.  Filtering to degrade or modify existing data in the image is possible because data exists, but to make an image sharper more data would be required.  Where would the additional information about the image come from?

kiggsondromeAuthor Commented:
with javascript it is apparently possible:

from what i see it even works in most/all
modern browsers, i have to try now if it will
apply to background images
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you looking for something as a one off or to integrate in a page dynamically?  That library is interesting.  I think I have seen it before.    

Sharpen here actually is taking away pixels.   But that would happen in photoshop too.   I have always done this serverside with installed on my server.   I could see this being used on an admin panel.

If you want something a little more refined,
kiggsondromeAuthor Commented:
The editor looks great, i have thumbnail popups displaying them
at 150% of the original thumb images, loading another slightly
bigger popup image from the server takes to much time for the
visitors so javascript sharpening for my site is best.

The scripts from work well and it looks like i can post
a solution later this week.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, I think I am lost though.  Do I have this right?  You want to start with a thumbnail image maybe 100 to 200 px wide?  Then click or hover causes a pop up of a larger image perhaps 400 to 500 px wide?    

The key will be setting up the image you are saving to the server.  An image that is 400px to 500px wide should probably only be at most 40k to 50k in size (depending on the hight).  Those should load plenty fast on a hover with only  a slight delay.   Something like this
kiggsondromeAuthor Commented:
I'm displaying the same image at different sizes while
enhancing them with javascript sharpening, the resize
possibly is only 140-160%.
Ishaan RawatDesigner | Developer | ProgrammerCommented:
try this...

This is a simple CSS technique by removing the blurr we can actually sharpen the images...

check this out..

 filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);

Open in new window

kiggsondromeAuthor Commented:
i have the javascript now with other options too:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.