Getting started

Download the compiled and minified VSCO.css files. Include vsco.css located in /dist in your website or Web app <head> part.

<link rel="stylesheet" href="vsco.min.css">

All filters use the same HTML structure with different filter-[filter-name] classes.

<figure class="filter-[filter-name]">
  <img src="assets/img/vsco.jpg">
</figure>

Normal

B1 - B&W Classic

filter-b1

B5 - B&W Classic

filter-b5

C1 - Chromatic

filter-c1

F2 - Mellow

filter-f2

G3 - Portraits

filter-g3

M3 - Mood

filter-m3

M5 - Mood

filter-m5

P5 - Instant

filter-p5

T1 - Moody

filter-t1

X1 - B&W Fade

filter-x1

VSCO X

Gingham

filter-gingham

Ginza

filter-ginza

Hefe

filter-hefe

Helena

filter-helena

Hudson

filter-hudson

Inkwell

filter-inkwell

Kelvin

filter-kelvin

Juno

filter-juno

Lark

filter-lark

Lo-Fi

filter-lofi

Ludwig

filter-ludwig

Maven

filter-maven

Mayfair

filter-mayfair

Moon

filter-moon

Nashville

filter-nashville

Perpetua

filter-perpetua

Poprocket

filter-poprocket

Reyes

filter-reyes

Rise

filter-rise

Sierra

filter-sierra

Skyline

filter-skyline

Slumber

filter-slumber

Stinson

filter-stinson

Sutro

filter-sutro

Toaster

filter-toaster

Valencia

filter-valencia

Vesper

filter-vesper

Walden

filter-walden

Willow

filter-willow

X-Pro II

filter-xpro-ii

VSCO.css

Complete set of VSCO filters in pure CSS

Getting started

VSCO X