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 Jan. 29, 2022

turned-on black iPadIcons in Avada
man holding his head while sitting on chair near computer deskAvada - the 2022 opinion

Leave a Reply

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


  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Going Green-ish

    Going Green-ish

    Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.

    December 28, 2022

  • Read Analytics Alternative: Cabin.

    If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.

    December 25, 2022

  • Read New Section: Code Snippets

    I created a new Code Snippets section to start collecting and sharing code that I have found helpful for Avada or WordPress in general.

    December 18, 2022

  • Read The State of WordPress

    The future of WordPress is very bright, but it is going to take a new way of thinking and a willingness to learn new things. Gutenberg is only a part of that future.

    December 15, 2022

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022