Complete set of Instagram filters in pure CSS
CSS 2/3, Instagram.css
Snippet by Anon
1092 0
Resources
<div class="container grid-xl text-center"> <div class="columns"> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Normal</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-1977"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">1977</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-aden"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Aden</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-amaro"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Amaro</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-ashby"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Ashby</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-brannan"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Brannan</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-brooklyn"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Brooklyn</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-charmes"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Charmes</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-clarendon"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Clarendon</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-crema"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Crema</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-dogpatch"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Dogpatch</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-earlybird"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Earlybird</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-gingham"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Gingham</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-ginza"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Ginza</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-hefe"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Hefe</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-helena"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Helena</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-hudson"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Hudson</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-inkwell"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Inkwell</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-kelvin"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Kelvin</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-juno"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Juno</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-lark"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Lark</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-lofi"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Lo-Fi</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-ludwig"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Ludwig</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-maven"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Maven</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-mayfair"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Mayfair</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-moon"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Moon</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-nashville"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Nashville</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-perpetua"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Perpetua</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-poprocket"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Poprocket</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-reyes"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Reyes</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-rise"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Rise</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-sierra"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Sierra</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-skyline"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Skyline</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-slumber"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Slumber</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-stinson"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Stinson</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-sutro"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Sutro</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-toaster"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Toaster</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-valencia"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Valencia</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-vesper"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Vesper</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-walden"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Walden</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-willow"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">Willow</span> </div> </div> </div> <div class="column col-2 col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-image filter-xpro-ii"> <img src="http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/images/instagram.jpg" class="img-responsive"> </div> <div class="card-header"> <span class="h6">X-Pro II</span> </div> </div> </div> </div> </div>
{} CSS Resources
http://doodlenerd.com/Uploads/Resources/2018/08/53rLlPhCRzE/css/instagram.min.css