---
title: "CSS Blurry Christmas Lights"
date: "2018-12-11T00:00:00+00:00"
tags: ["christmas","CSS","holiday","sass","webdesign"]
project: null
---

# CSS Blurry Christmas Lights

Source: https://greenzeta.com/update/css-blurry-christmas-lights/
Last updated: 2018-12-11T00:00:00+00:00

Lots of blurry colored lights make for a great \#holiday background. I set out to create a procedurally generated background that could be tweaked easily. The effect uses a pure \#css solution. \#SASS variables are used to simplify the color application. This demo uses JavaScript to randomize the color and position of the lights. \[codepen\_embed height="400" theme\_id="0" slug\_hash="bQzVBr" default\_tab="css,result" user="mwilber"\]See the Pen [Blurry Christmas Lights](https://codepen.io/mwilber/pen/bQzVBr/) by Matthew Wilber ([@mwilber](https://codepen.io/mwilber)) on [CodePen](https://codepen.io).\[/codepen\_embed\]