diff --git a/demos/blur/bg.jpg b/demos/blur/bg.jpg
new file mode 100644
index 0000000000..c3298fcb99
Binary files /dev/null and b/demos/blur/bg.jpg differ
diff --git a/demos/blur/index.html b/demos/blur/index.html
new file mode 100644
index 0000000000..a6cb807e57
--- /dev/null
+++ b/demos/blur/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/blur/index.ts b/demos/blur/index.ts
new file mode 100644
index 0000000000..00bd916c6b
--- /dev/null
+++ b/demos/blur/index.ts
@@ -0,0 +1,10 @@
+import {App} from 'ionic/ionic';
+
+@App({
+ templateUrl: 'main.html'
+})
+
+class DemoApp {
+ blur() {
+ }
+}
diff --git a/demos/blur/main.html b/demos/blur/main.html
new file mode 100644
index 0000000000..420478fa8c
--- /dev/null
+++ b/demos/blur/main.html
@@ -0,0 +1,13 @@
+
+
+ Blur
+
+
+
+
+
+
+ "
+
Blurred!
+
+
diff --git a/ionic/components.ts b/ionic/components.ts
index 94eb8ee941..4dee334288 100644
--- a/ionic/components.ts
+++ b/ionic/components.ts
@@ -2,6 +2,7 @@
export * from 'ionic/components/app/app'
export * from 'ionic/components/app/id'
export * from 'ionic/components/action-sheet/action-sheet'
+export * from 'ionic/components/blur/blur'
export * from 'ionic/components/button/button'
export * from 'ionic/components/card/card'
export * from 'ionic/components/checkbox/checkbox'
diff --git a/ionic/components/blur/blur.ts b/ionic/components/blur/blur.ts
new file mode 100644
index 0000000000..41712a04a0
--- /dev/null
+++ b/ionic/components/blur/blur.ts
@@ -0,0 +1,11 @@
+import {Directive, Renderer, ElementRef} from 'angular2/angular2';
+
+@Directive({
+ selector: '[ion-blur]'
+})
+export class Blur {
+ constructor(private elementRef: ElementRef, private renderer: Renderer) {
+ console.log('Blur renderer', renderer);
+ renderer.setElementStyle(elementRef, '-webkit-backdrop-filter', 'blur(10px)');
+ }
+}
diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts
index e0f5a8614e..77f189fd48 100644
--- a/ionic/config/decorators.ts
+++ b/ionic/config/decorators.ts
@@ -18,7 +18,8 @@ import {
Nav, NavbarTemplate, Navbar,
NavPush, NavPop, NavRouter,
IdRef,
- ShowWhen, HideWhen
+ ShowWhen, HideWhen,
+ Blur
} from '../ionic';
/**
@@ -93,6 +94,9 @@ export const IONIC_DIRECTIVES = [
forwardRef(() => ShowWhen),
forwardRef(() => HideWhen)
+
+ // Random effects
+ forwardRef(() => Blur)
];
/**