Instagram filters CSS generator

Use famous Instagram filters via CSS and apply them to your project

Other tools Masks docs Free MDB UI KIT

Click the image to apply the filter. Move the scroll bar to see all filters.

#nofilter

1977

Aden

Amaro

Brannan

Brooklyn

Clarendon

Earlybird

Gingham

Hudson

Inkwell

Lofi

Maven

Perpetua

Reyes

Stinson

Toaster

Walden

Valencia

Xpro2

Applied filter: {{ filterName }}


              .mask-custom {
                backdrop-filter: contrast(110%) brightness(110%) saturate(130%);
                mix-blend-mode: screen;
                background: rgba(243, 106, 188, 0.3);
                opacity: 1;
              }
              

              <div class="bg-image">
                  <img
                  src="https://mdbootstrap.com/img/new/standard/city/053.webp"
                  class="w-100"
                  alt="Sample"
                  />
                  <div class="mask mask-custom">
                  <div class="d-flex justify-content-center align-items-center h-100">
                      <h3 class="text-white mb-0">Can you see me?</h3>
                  </div>
                  </div>
              </div>
              
Filters

How to use it?

1. Download MDB 5 - free UI KIT

2. Create the filter you like

3. Copy the generated code and paste it into the MDB project