CSS Color Gradient

This site generates code for you further customize your page's CSS in all areas. 

In most cases, you will be given a small block of code where you will go into the component you wish to customize and find the "Class" you will then swap the text of Class with your text.

.Class {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

Here I have an example of a button. Where the following code was generated from the website above. 

Step 1

Add an HTML component to your page.

Step 2

Add the following code to the source code to the HTML Component to create a button.

<p><button class="btn-grad">Click me!</button></p>

Please notice where I added the class of the button within the source code.

Step 3

Finally, add the code of the button you customized within the website above to your page's CSS tab.

.btn-grad {
    background - image: linear - gradient(to right, #314755 0%, # 26 a0da 51 %, #314755 100%)
}

.btn-grad {
    margin: 10px;
    padding: 10px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px # eee;
    border - radius: 10 px;
    display: block;
}

.btn-grad: hover {
    background - position: right center;
    /* change the direction of the change here */
    color: #fff;
    text - decoration: none;
}

Original Community Post:

https://community.tadabase.io/t/css-colour-gradient-code-generator/2035/2