> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/css/style-a-background-with-a-linear-gradient.md).

# 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.

![gradient example](https://i.imgur.com/Jybn4MB.png) See the Pen [pQpypW](https://codepen.io/jbranchaud/pen/pQpypW/) by Josh Branchaud ([@jbranchaud](https://codepen.io/jbranchaud)) on [CodePen](https://codepen.io).

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`.