How to Add Color Gradients to Your MemberVault in 3 Simple Steps

Color gradients can add a splash of luxury to your MemberVault - but they can also feel a bit intimidating to implement. Don’t fret, Juci from Code & Glitter is here to walk you through this step by step, so you can easily glamify your MV with gradients in just a few minutes!

STEP 1: FIND YOUR GRADIENT

You can use CSSgradient.io to create your perfect gradient. You can add your brand colors, tweak the angle, the composition, and the overall look and feel, and by the time you're done, the site even provides you with some of the CSS you need. So, using the first example on the site, we get this:

background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

Now, this is a strong first step, but it's not valid CSS code just yet - so let's note it down, and keep going!

STEP 2: FIGURE OUT WHAT YOU WANT TO ADD THIS GRADIENT TO

Some popular destinations are the announcement bar, the header, the welcome area, the buttons, and the footer. The principle (or, rather, the syntax) is going to be the same in all cases, just like this:

what you want to tweak (aka the selector) {     the gradient you got in Step 1; }

These are the selectors you may want to use:

```
Announcement bar: #mv_announcement
```
```
Header: header
```
```
Welcome area: #mv_welcome_area
```

Primary buttons (aka the Buy buttons): .mv_content a.mv_primary_button, .mv_primary_button

Secondary buttons (aka the Learn more buttons): .mv_content a.mv_secondary_button, .mv_secondary_button

```
Footer: footer
```

Alright, but how do you put it all together?

Trust me, it's very simple - you pick a selector (or more selectors if you're feeling fancy!) and add the code you got in Step 1. Here is an example for the announcement bar:

#mv_announcement {     background: rgb(2,0,36);     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); }

Here is how it would change if you wanted to tweak the footer instead of the announcement bar:

footer {     background: rgb(2,0,36);     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); }

You can also add multiple selectors, you just need to separate them with a comma - here is an example for changing both the primary and secondary buttons, as well as the header:

.mv_content a.mv_primary_button, .mv_primary_button,  .mv_content a.mv_secondary_button, .mv_secondary_button,  header {     background: rgb(2,0,36);     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); }

See? Super easy!

Now, if you've put together your perfect snippet, it's time to move on to Step 3.

STEP 3: ADD IT TO YOUR MV

Now that you have your perfectly valid CSS code, you'll just need to add it to your MV - so go to Settings > General, paste that beauty into your Custom CSS box, and marvel at the magnificence of your MV! 🙌

If you'd like to learn more about our CSS feature and the full list of all the elements that you can customize, check out this article: Using CSS to Customize the Look of Your Account

Meet Juci! 👋

Juci (pronounced like "UC") is a code nerd with a passion for design. She helps badass business owners create gorgeous, show-stopping MVs - from bold, on-brand designs to luxurious course experiences that their students can’t get enough of.

Visit her website for more info.

Questions? Reach out to us at hello@membervault.co, via chat support within your Admin account (available to paid users), or connect with other users within our FB Group, The MV Collaborative.