Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin

File Size: 491 KB
Views Total: 4673
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin

oblurlay is a jQuery plugin that implement a frosted glass-like blurred mask on any Html elements similar to the iOS 7 blur view. Works on modern web browsers which support CSS3 and SVG element.

Basic Usage:

1. Include the jQuery javascript library and the jQuery oblurlay plugin in the page.

<script src=""></script>
<script src="js/oblurlay.js"></script>

2. Create the Html for the blurred mask layer and contents layer, and then wrap them in the parent element.

<div class="oblurlay">
<div class="oblurlay-upper"> 
upper layer
<div class="oblurlay-contents">
<div class="contents"> 
contents layer

3. Call the plugin on the parent element and you're done.

$(document).ready(function() {

4. The required CSS rules to style the blurred mask.

.oblurlay-upper {
  height: 70px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: #ccc;
.oblurlay-contents {
  position: relative;
  height: 70px;
.oblurlay-contents-clone {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: .9;
.oblurlay-svg {
  height: 70px;

Change log:



  • updated to v0.1.0.


  • update.

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.