mirror of
https://github.com/jbranchaud/til
synced 2026-01-07 00:58:02 +00:00
21 lines
949 B
Markdown
21 lines
949 B
Markdown
# 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.
|
|
|
|
<iframe height='251' scrolling='no' title='pQpypW' src='//codepen.io/jbranchaud/embed/pQpypW/?height=251&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/jbranchaud/pen/pQpypW/'>pQpypW</a> by Josh Branchaud (<a href='https://codepen.io/jbranchaud'>@jbranchaud</a>) on <a href='https://codepen.io'>CodePen</a>.
|
|
</iframe>
|
|
|
|
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`.
|