Gradients & Patterns

The brand stylesheet can be used to apply color gradients and repeating patterns to backgrounds. To use the brand stylesheet on a web page, add the following line:

<link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">

Gradients

The following CSS variables can be used to apply gradient backgrounds:

--il-gradient-blue
--il-gradient-orange
--il-gradient-white

.hero {
  color: white;
  background: var(--il-gradient-blue);
}

Patterns

Pattern images are available in 2 styles and 3 colors each:

Ascend

Finial

The following CSS variables can be used to reference a specific style and color of pattern:

--il-pattern-ascend-blue
--il-pattern-ascend-orange
--il-pattern-ascend-white
--il-pattern-finial-blue
--il-pattern-finial-orange
--il-pattern-finial-white

.hero {
  background-color: var(--il-orange);
  background-image: var(--il-pattern-ascend-blue);
}

The following CSS variables combine gradients and patterns:

--il-background-ascend-blue
--il-background-ascend-orange
--il-background-ascend-white
--il-background-finial-blue
--il-background-finial-orange
--il-background-finial-white

.hero {
  background: var(--il-background-ascend-blue);
}

For more information about using gradients and patterns, see the Graphic Elements section of the Brand Guidelines website.