HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Effects & Filters

CSS Effects & Filters

CSS provides powerful graphic effects that previously required Photoshop. These include image filters, blend modes, and advanced shadows.

The `filter` Property

Applies graphical effects like blur or color shift to an element (usually an image). Functions include:

blur(px): Applies a Gaussian blur.
brightness(%): Adjusts image brightness.
grayscale(%): Converts the image to black and white.
drop-shadow(): Applies a shadow to the exact shape of the element (even transparent PNGs), unlike box-shadow which is always rectangular.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; background: #fff; text-align: center; }
    .gallery { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
    
    .img-card { margin-bottom: 20px; }
    .img-card img {
      width: 250px;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
      transition: filter 0.5s ease;
    }
    
    /* The Filters */
    .blur img { filter: blur(4px); }
    .blur:hover img { filter: blur(0); }
    
    .grayscale img { filter: grayscale(100%); }
    .grayscale:hover img { filter: grayscale(0); }
    
    .sepia img { filter: sepia(100%); }
    .sepia:hover img { filter: sepia(0); }
    
    .drop-shadow img { 
      /* Drop-shadow works beautifully on images with transparent backgrounds */
      filter: drop-shadow(8px 8px 10px rgba(0,0,0,0.5)); 
    }
  </style>
</head>
<body>

<h2>Hover over the images to remove the filters!</h2>
  <div class="gallery">
    <div class="img-card blur">
      <img src="https://picsum.photos/id/1015/300/200" alt="Blur">
      <h4>Blur Filter</h4>
    </div>
    
    <div class="img-card grayscale">
      <img src="https://picsum.photos/id/1016/300/200" alt="Grayscale">
      <h4>Grayscale Filter</h4>
    </div>
    
    <div class="img-card sepia">
      <img src="https://picsum.photos/id/1018/300/200" alt="Sepia">
      <h4>Sepia Filter</h4>
    </div>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz