diff --git a/ionic/components/blur/blur.ts b/ionic/components/blur/blur.ts
index b2c62432f8..c233ac1cf5 100644
--- a/ionic/components/blur/blur.ts
+++ b/ionic/components/blur/blur.ts
@@ -4,8 +4,7 @@ import {Directive, Renderer, ElementRef} from 'angular2/core';
 /**
  * @name Blur
  * @description
- * The blur attribute applies the CSS blur attribute to an element. If the CSS attribute is not supported,
- * it will fall back to applying a semi-transparent background color to the element.
+ * The blur attribute applies the CSS blur attribute to an element. Safari only.
  *
  * @usage
  * ```html
@@ -21,6 +20,6 @@ import {Directive, Renderer, ElementRef} from 'angular2/core';
 })
 export class Blur {
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
-    _renderer.setElementStyle(_elementRef, '-webkit-backdrop-filter', 'blur(10px)');
+    _renderer.setElementStyle(_elementRef.nativeElement, '-webkit-backdrop-filter', 'blur(10px)');
   }
 }
diff --git a/ionic/components/blur/test/basic/bg.jpg b/ionic/components/blur/test/basic/bg.jpg
new file mode 100644
index 0000000000..c3298fcb99
Binary files /dev/null and b/ionic/components/blur/test/basic/bg.jpg differ
diff --git a/ionic/components/blur/test/basic/index.ts b/ionic/components/blur/test/basic/index.ts
new file mode 100644
index 0000000000..ac2d757460
--- /dev/null
+++ b/ionic/components/blur/test/basic/index.ts
@@ -0,0 +1,10 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+  }
+}
diff --git a/ionic/components/blur/test/basic/main.html b/ionic/components/blur/test/basic/main.html
new file mode 100644
index 0000000000..d54b9c1a36
--- /dev/null
+++ b/ionic/components/blur/test/basic/main.html
@@ -0,0 +1,34 @@
+
+<ion-toolbar>
+  <ion-title>Blur</ion-title>
+</ion-toolbar>
+
+<ion-content>
+  <div class="blur-content">
+    <ion-card blur class="blur-card">
+      <ion-card-header>
+        Card
+      </ion-card-header>
+      <ion-card-content>
+        This card will blur the content behind it.
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>
+
+<style>
+  .blur-content {
+    position: absolute;
+    text-align:center;
+    background: url('bg.jpg') no-repeat transparent;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  .blur-card,
+  .blur-card ion-card-header {
+    background: transparent;
+    color: white;
+  }
+</style>