Utilities Bootstrap 5Free+ CSS
Add a utility to your UI with Pure CSS Image Filters snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1.7k views12 downloads
gosnippets.com/preview/pure-css-image-filters-snippet
Source Code
1<main role="main">
2 <ul class="grid">
3 <li><img class="saturate" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
4 Saturate: <code>filter: saturate(2);</code></li>
5 <li><img class="hue" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
6 Hue Rotate: <code>filter: hue-rotate(140deg);</code></li>
7 <li><img class="invert" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
8 Invert: <code>filter: invert(.8);</code></li>
9 <li><img class="greyscale" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
10 Grayscale: <code>filter: grayscale(1);</code></li>
11 <li><img class="sepia" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
12 Sepia: <code>filter: sepia(100%);</code></li>
13 <li><img class="blur" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
14 Blur: <code>filter: blur(5px);</code></li>
15 <li><img class="darken" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
16 Brightness: <code>filter: brightness(.5);</code></li>
17 <li><img class="contrast" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
18 Contrast: <code>filter: contrast(3);</code></li>
19 <li><img class="all-the-things" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
20 Combo: <code>filter: contrast(1.4) saturate(1.8) sepia(.6);</code></li>
21 </ul>
22</main>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.