<header class="header">
  <div class="header__title">
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>

  <div class="example">
      In this example, the further right we drag the range slider, the greater the blur effect that is applied to the ghost emoji:

    <div class="controls">
      <label class="controls__label" for="blur">Blur:</label>
      <input class="controls__input" type="range" id="blur" min="0" max="50" value="0">

    <div class="example__demo example__demo--blur">
        <span class="ghost">👻</span>
// Demo
:root {
  --blur: 0px;

.ghost {
  font-size: var(--size-alpha);
  filter: blur(var(--blur));

// Pen Setup
.controls {
  display: flex;
  flex-direction: column;
  margin-top: var(--size-epsilon);

.controls__label {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;

.controls__input {
  margin-top: 0.5rem;

.example__demo--blur {
  background-color: var(--color-cinder);
  text-align: center;
View Compiled
// Credit: 
// Update CSS Variables with JS
// Wes Bos
// https://codepen.io/wesbos/pen/adQjoY

const rangeSlider = [].slice.call(document.querySelectorAll('#blur'));

// Listen for changes
rangeSlider.forEach(input => input.addEventListener('change', handleUpdate));
rangeSlider.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
  // Append 'px' to the end of the `blur` custom property
  const suffix = (this.id === 'base' ? '' : 'px');
  document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
Run Pen

External CSS

  1. https://codepen.io/ericwbailey/pen/vMXWgz.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.