Two tone border color effect

Down the bottom of this page you have three columns with pricing inside: https://theme.co/pro/

The border of the columns has a two tone effect where it starts off blue and changes into purple. How do I achieve the same?

And can I have that same effect for button borders?

P.S. I am using latest version of Pro.

1 Like

Hi there,

Those are custom columns and the two tone borders are background gradients width a custom block that matches the site background over the gradient backgrounds.

If you want to replicate that effect, first, select each column where you want the effect to be added to and set some border radius to the columns. You can add the border radius in px value.

Then, click on the section settings that contains the columns and click the customize option then add this code to the Element CSS option:

$el .x-column {
    background-image: -webkit-linear-gradient(to bottom, #3d308b, #33125a);
    background-image: linear-gradient(to bottom, #3d308b, #33125a);
}

$el .x-column:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: calc(10px - 3px);
    background-color: #fff;
    z-index: -1;
}

Please take note of these lines in the code:

    background-image: -webkit-linear-gradient(to bottom, #3d308b, #33125a);
    background-image: linear-gradient(to bottom, #3d308b, #33125a);

This will set the gradient background to the columns that will give the border effect. You can replace the code with the gradient color that you prefer. You may use this gradient generator site to get gradient codes.

Also this lines:

    border-radius: calc(10px - 3px);
    background-color: #fff;

The 10px value in the code is the border radius value you set to the columns a directed in the first step you did for this setup

Then the background color is the color that matches the background color where the section is.

Please update the values in the code accordingly to your setup.

Also, I am not sure which button border you are referring to in your last question. Would you mind clarifying?

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.