CSS Image Filters

<!DOCTYPE html>
<html>
<head>
    <style>
        .filter-demo {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .img-item { width: 140px; border-radius: 8px; }
        .gray { filter: grayscale(100%); }
        .blur-fx { filter: blur(2px); }
        .sepia-fx { filter: sepia(80%); }
    </style>
</head>
<body>
    <div class="filter-demo">
        <div><img src="https://picsum.photos/140/140" class="img-item gray"><br><small>Grayscale</small></div>
        <div><img src="https://picsum.photos/140/140" class="img-item blur-fx"><br><small>Blur</small></div>
        <div><img src="https://picsum.photos/140/140" class="img-item sepia-fx"><br><small>Sepia</small></div>
    </div>
</body>
</html>