You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

Gradients

Codex’s library for inspiration.

Codex provides a library of gradients for use as backgrounds and image masks. Add fx/gradients to your article’s assets to get started. The utility classes below can be used to overlay images just on their own.

You must have JavaScript enabled.

Gradients can be rotated with utility classes for

You must have JavaScript enabled.

Gradients can be placed over another object using absolute positioning with the .fill class. You’ll also want to add one of the following classes to change how the gradient interacts with the image using the CSS opacity and mix-blend-mode properties.

You must have JavaScript enabled.

Gradients can be animated with the following utility classes. Instead of using the expensive background-size and background-position properties of CSS, the animation classes use CSS 3d transforms to take advantage of GPU acceleration, conserving battery life on mobile devices. However, this requires that they be contained within wrapper elements with the class .gradient-parent that will hide the overflow. Toggle the check box to see what’s happening underneath.

You must have JavaScript enabled.

Change the speed of the animation:

You must have JavaScript enabled.

The gradients don’t need to be used on top of images but make great backgrounds on their own. They can also be layered to make a new one

This shows .violet.gradient.slow.revolve.rotate-45.translucent

on top of .pinklimo.gradient.pan-vertical

Gradients can also be used for text colors with the .text class. However, this also is not supported by Internet Explorer.

Gradient Backgrounds Look Amazing

The source code for the Codex gradients is available on Github.