From 3137901d5e57c4b25a002bd6fed01489dd15e136 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Fri, 8 Sep 2017 15:37:34 -0500
Subject: [PATCH] Add Lighten And Darken With CSS Brightness Filter as a css
 til

---
 README.md                                     |  3 +-
 ...n-and-darken-with-css-brightness-filter.md | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 css/lighten-and-darken-with-css-brightness-filter.md

diff --git a/README.md b/README.md
index 0c9fe25..18d8140 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_554 TILs and counting..._
+_555 TILs and counting..._
 
 ---
 
@@ -79,6 +79,7 @@ _554 TILs and counting..._
 
 ### CSS
 
+- [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
 
 ### Devops
diff --git a/css/lighten-and-darken-with-css-brightness-filter.md b/css/lighten-and-darken-with-css-brightness-filter.md
new file mode 100644
index 0000000..3543b24
--- /dev/null
+++ b/css/lighten-and-darken-with-css-brightness-filter.md
@@ -0,0 +1,31 @@
+# Lighten And Darken With CSS Brightness Filter
+
+CSS has a `filter` property that can be used with a variety of filter
+functions. One of them is the `brightness()` filter. By feeding a percentage
+less than `100%` to `brightness()`, the target element will be made darker.
+Inversely, feeding a percentage greater than `100%` to `brightness()` will
+make the element brighter.
+
+```css
+.brighter-span {
+  filter: brightness(150%);
+}
+
+.darker-span {
+  filter: brightness(50%);
+}
+```
+
+<p data-height="171" data-theme-id="0" data-slug-hash="OjKJpa"
+data-default-tab="result" data-user="jbranchaud" data-embed-version="2"
+data-pen-title="OjKJpa" class="codepen">See the Pen <a
+href="https://codepen.io/jbranchaud/pen/OjKJpa/">OjKJpa</a> by Josh
+Branchaud (<a href="https://codepen.io/jbranchaud">@jbranchaud</a>) on <a
+href="https://codepen.io">CodePen</a>.</p>
+<script async
+src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+See this [CSS Tricks Article on the `filter`
+property](https://css-tricks.com/almanac/properties/f/filter/) for more
+details. Check out the browser support story
+[here](http://caniuse.com/#feat=css-filters).