bnn-gradient.md

bnn-gradient

Summary

The bnn-gradient property provide a simple vertical or horizontal background gradient.

---

Syntax

.foo {
  bnn-gradient: <color> <color> [vertical | horizontal];
}

---

Examples

Simple gradient

Banana code:

.foo {
  bnn-gradient: #000 #fff;
}

Generated CSS code:

.foo {
  background-image: linear-gradient(to bottom, #000, #fff);
}

Vertical gradient

Banana code:

.foo {
  bnn-gradient: #000 #fff vertical;
}

Generated CSS code:

.foo {
  background-image: linear-gradient(to bottom, #000, #fff);
}

Horizontal gradient

Banana code:

.foo {
  bnn-gradient: #000 #fff horizontal;
}

Generated CSS code:

.foo {
  background-image: linear-gradient(to left, #000, #fff);
}