diff --git a/README.md b/README.md index 67e8896..f110ad7 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/). -_723 TILs and counting..._ +_724 TILs and counting..._ --- @@ -96,6 +96,7 @@ _723 TILs and counting..._ - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md) - [Make A Block Of Text Respect New Lines](css/make-a-block-of-text-respect-new-lines.md) - [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md) +- [Style A Background With A Linear Gradient](css/style-a-background-with-a-linear-gradient.md) ### Devops diff --git a/css/style-a-background-with-a-linear-gradient.md b/css/style-a-background-with-a-linear-gradient.md new file mode 100644 index 0000000..47309f5 --- /dev/null +++ b/css/style-a-background-with-a-linear-gradient.md @@ -0,0 +1,25 @@ +# Style A Background With A Linear Gradient + +The +[`linear-gradient`](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) +function in its simplest form can be used to style the background of an +element with a vertical, linear gradient between two colors. + +

See the Pen pQpypW by Josh +Branchaud (@jbranchaud) on CodePen.

+ + +Here is what the CSS looks like: + +```css +.container { + background: linear-gradient(#00449e, #e66465); +} +``` + +The background of any element with the `container` class will be styled with +a linear gradient that transitions from `#00449e` to `#e66465`.