How to create image filters with CSS

CSS Web Development Front End Technology

You can try to run the following code to create image filters such as blur, contrast, brightness with CSS −

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: auto;
            float: left;
         }
         .contrast {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
         }
         .brightness {
            -webkit-filter: brightness(250%);
            filter: brightness(250%);
         }
         .blur {
            -webkit-filter: blur(4px);
            filter: blur(4px);
         }
      </style>
   </head>
   <body>
      <img
      src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">

      <img class = "contrast"
         src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">

      <img class = "brightness"
         src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">
     
      <img class="blur"
         src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png alt = "Animation Training" width = "200" height = "200">
   </body>
</html>

Vrundesha Joshi

Published on 23-May-2018 07:40:04

Previous Page Print Page