diff --git a/source/css/skyline.css b/source/css/skyline.css
new file mode 100644
index 0000000..7e0b8ff
--- /dev/null
+++ b/source/css/skyline.css
@@ -0,0 +1,38 @@
+/*
+ *Skyline
+ *
+ */
+
+ .skyline:before,
+.skyline:after {
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: none; }
+
+
+.skyline {
+  position: relative; }
+  
+  .skyline img {
+    width: 100%;
+    z-index: 1; }
+  
+  .skyline:before {
+    z-index: 2; }
+  
+  .skyline:after {
+    z-index: 3; }
+
+
+.skyline {
+  -webkit-filter: brightness(1.2) contrast(1.1);
+          filter: brightness(1.2) contrast(1.1); }
+  
+  .skyline:after {
+    background: rgba(93, 101, 186, 0.2);
+    mix-blend-mode: overlay; }
\ No newline at end of file
diff --git a/source/scss/skyline.scss b/source/scss/skyline.scss
new file mode 100644
index 0000000..b3525f6
--- /dev/null
+++ b/source/scss/skyline.scss
@@ -0,0 +1,39 @@
+/*
+ * Skyline
+ *
+ */
+@import 'shared';
+
+// mixin to extend skyline filter
+// @mixin skyline
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+//   img {
+//     @include skyline;
+//   }
+//   or
+//   img {
+//     @include skyline(blur(2px));
+//   }
+//   or
+//   img {
+//     @include skyline(blur(2px)) {
+//       /*...*/
+//     };
+//   }
+@mixin skyline($filters...) {
+  @extend %filter-base;
+  filter: contrast(1.1) brightness(1.2) $filters;
+
+  &::after{
+    background: rgba(93, 101, 186, 0.2);
+    mix-blend-mode: overlay;
+  }
+  @content;
+}
+
+// skyline Instagram filter
+%skyline,
+.skyline {
+  @include skyline;
+}
\ No newline at end of file