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.
Gradients can be rotated with utility classes for
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
Gradients can be animated with the following utility classes. Instead of using the expensive
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.
Change the speed of the animation:
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.