Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="hero">
  <canvas class="hero__background" id="heroCanvas" width="200" height="200" data-canvas></canvas>
  <h1 class="hero__title">Image Blur Texture</h1>
</div>

<!-- Our image to be blurred -->
<img data-canvas-image style="display: none" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAyAAD/4QNkaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAyMSA3OS4xNTQ5MTEsIDIwMTMvMTAvMjktMTE6NDc6MTYgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9IjM0MDcyRTJGREQwRDdEODZDMkVBOEEzMTk5OUU4NjVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzQTVFODJDRUE4NzExRTM5ODFGRTUxNUFDNkMyRTAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzQTVFODJCRUE4NzExRTM5ODFGRTUxNUFDNkMyRTAwIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ1OWZiZmQ4LTZmNmUtNDM2Yy04OWRjLTU1Y2QwZWQ3Mjg2NyIgc3RSZWY6ZG9jdW1lbnRJRD0iMzQwNzJFMkZERDBEN0Q4NkMyRUE4QTMxOTk5RTg2NUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/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" />
              
            
!

CSS

              
                @import "bourbon";

.hero {
  padding: 3em 0;
  background: #333;
  position: relative;
  
  &__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  &__title {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
  }
}
              
            
!

JS

              
                $(function() {
  // Change this value to adjust the amount of blur
  var BLUR_RADIUS = 100;

  var canvas = document.querySelector('[data-canvas]');
  var canvasContext = canvas.getContext('2d');
  
  var image = new Image();
  image.src = document.querySelector('[data-canvas-image]').src;
  
  var drawBlur = function() {
    var w = canvas.width;
    var h = canvas.height;
    canvasContext.drawImage(image, 0, 0, w, h);
    stackBlurCanvasRGBA('heroCanvas', 0, 0, w, h, BLUR_RADIUS);
  };
  
  image.onload = function() {
    drawBlur();
  }
});
              
            
!
999px

Console