Paywall Colors

Working with Gradients

To setup a Gradient, you need an Angle, and Colors. Let's talk about each one.


In this photo, the paywall has a gradient background with angle 180° flowing from black to white.


The gradient has an angle. This angle is used to control which direction the colors flow. A 180° gradient will order the colors in the opposite direction of a 0° gradient. A 90° gradient will order the colors opposite of a 270° gradient.


A gradient is made up of number of colors flowing in and out of each other. Each color in a gradient has a value and a stop position.

Color Stop

The color stop in a gradient is used to tell the gradient where this color should end and the next should begin. By default, a linear gradient has 1 color at the 0 stop position and another at the 100 stop position. That means the colors flow equally into each other in the middle.

To add another color equally in the middle, place the 3rd color at stop 50.