Gradients, the transition from one color to another or others, are an easy way to add interest to your website. Avada features a very simple two-color gradient feature that is easy to use and can create a lot of interesting effects. The key to gradients is understanding the relationship between the start and stop positions (a percentage from 0-100), and the gradient angle (0-360). Here are some samples.

The simple linear gradient. Two colors, no custom settings.

The simple radial gradient. Two colors, no custom settings.

Linear gradient. Two colors, 50/50 start and end position and 180 degree gradient angle

Linear gradient. Two colors, 50/50 start and end position and 90 degree gradient angle.

Linear gradient. Two colors, 50/50 start and end position and 45 degree gradient angle.

Linear gradient. One color at the start and transparent at the end. Great for photo title bars to improve color contrast.

Your title goes here

Linear gradients can also be used to create a floating look or used to create a connection between adjacent containers or both.

Call to Action

Venenatis sapiente lorem aliquam dolor, illum fugiat fames ipsam netus aliqua facere.

Linear gradients can also be used in columns and nested columns to produce interesting design elements

Integer minim eius ligula vulputate pede expedita aut autem erat aspernatur corporis, nemo qui soluta sociosqu. Adipisci ridiculus id sociis? Incididunt! Omnis platea enim.

Luctus gravida laudantium potenti, fusce. Venenatis magna nullam! Nam, luctus vero quo voluptate ornare maiores aptent! Commodi. Quae! Sem veritatis, blanditiis. Nullam convallis repellat.