By Stephen Walker

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. I put together a collection of examples.

Avada documentation is limited on the various options so if you have a question leave a comment.

Background gradient options

The gradient settings are pretty simplistic and do not have responsive settings. When used with an image background, you do not need to set a blend mode on the image, just use color opacity level.

  1. Set you start color. Can be solid or use transparency.
  2. Set you end color. Can be solid or use transparency.
  3. Set the start position. This is based on the gradient angle but is typically the top by default. This adjust the level and position of the the transition. If start and stop are set to add up to 100 (e.g., 50/50,55/45, etc.) there will be no transition and you will have a clean line.
  4. Set the end position. This is based on the gradient angle but is typically the bottom by default. This adjust the level and position of the the transition.
  5. Gradient type. This allows you to choose wheter the gradient is linear — point a to point b — or radiates from the center.
  6. Gradient angle allows you to rotatate the linear gradient around a circle (360 degrees) — from top to bottom, to left to-right, or corner to corner.
Screenshot of the background gradient options.

Originally published on January 29, 2022

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • New Feature – Quick Tips

    I have struggled to find the time to write full tutorials or even longer posts, so I am adding a Quick Tips category. This is similar to the news shorts, but almost every article will include code or a quick tip (imagine that) about an Avada setting or quirk.

  • Left Bar Separator

    Just using some custom CSS to create a color bar before a heading.

  • RSS and Avada

    RSS is an excellent way to get content to readers that don't have time to visit a hundred sites a day.

  • Borders and Boxes Demo

    Tryin to explain the layout fundamentals of Avada. Simple and not unique, but not necessarily intuitive for newcomers.

  • Conditional rendering – Oh the power

    In version 7.3 the ThemeFusion team added conditional rendering to the Avada toolset, but what they didn't do is explain all of the possible use cases.

  • Avada for the win – again

    In my apparently relentless pursuit of finding an alternative for Avada, I once again made my way around the builderverse and once again I am back to Avada.