Complete set of Instagram filters in pure CSS

gravatar
CSS 2/3, Instagram.css
Snippet by Anon
629 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