githubEdit

Style A Background With A Linear Gradient

The linear-gradientarrow-up-right 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 See the Pen pQpypWarrow-up-right by Josh Branchaud (@jbranchaudarrow-up-right) on CodePenarrow-up-right.

Here is what the CSS looks like:

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

Last updated