Vitamin Filters

Vitamin Bootstrap has taken the popular CSS filters and made them even easier to use. With just a few simple classes, you can add filters like grayscale, blur, brightness, and many more to your design. The best part is that you don't need to write any CSS code yourself, just add the class to your HTML elements and you're done!

Get Creative with Vitamin Filters

With Vitamin Bootstrap, you can now get creative and add new dimensions to your designs. Whether you want to create a stylish and modern website or add a touch of nostalgia with a vintage filter, the possibilities are endless. You can also easily experiment with different filter combinations to find the perfect look for your website.

Filters

the filters are named by its default css name, so you can use:

.blur
.contrast
.gray
.sepia
.bright
.dark
.hue
.invert
.saturate

all classes can be set from 0-5 with its name and a "-" before the number like .saturate-2
The only different is hue which have negative values too like .hue-n2

Basic examples

original

Vitamin

html

                        
<div class="row">
    <div class="col-md-6">
        <span ">original</span>
        <img src="vitamin-example-img.jpg" class="img-fluid">
    </div>
    <div class="col-md-6">
        <span >Vitamin</span>
        <img src="vitamin-example-img.jpg" class="img-fluid sepia-5">
    </div>    
</div>

All filters

.Blur-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="blur-3">

.Contrast-(0-5) vitamin example img

                            <img src="img/vitamin-example2-img.jpg" class="contrast-2">

.Gray-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="gray-5">

.Sepia-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="sepia-5">

.Bright-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="bright-4">

.Dark-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="dark-4">

.Hue-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="hue-2">

.Hue-n(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="hue-n2">

.Invert-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="invert-5">

.Saturate-(0-5) vitamin example img

                        <img src="img/vitamin-example2-img.jpg" class="saturate-3">