Gradient Borders

Step 1: Add a Code Embed on Your Page

<style>
[stroke="gradient"] {
  position: relative;
}
[stroke="gradient"]::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(227.71deg, transparent 0%, white 100%) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
</style>

%%resource_divider%%

Step 2: Configuration

In this code, you only need to modify two properties: border and background.

%%spacer-3rem%%

2.1: Border

%%spacer-2rem%%

border: 1px solid transparent; /* just change the border width */

%%spacer-2rem%%

Make sure that the border style remains solid and the border color stays transparent, only adjust the border width.

%%spacer-3rem%%

2.2: Background

%%spacer-2rem%%

background: linear-gradient(227.71deg, transparent 0%, white 100%) border-box; /* Dont remove border-box */

%%spacer-2rem%%

Replace this with your gradient value. If you want to learn how to get the stroke gradient code from Figma, watch the guide below. Make sure not to remove border-box after the gradient value

%%resource_divider%%

Step 3: Adding Attribute on Elements

Add this attribute to the element where you want to apply gradient borders. Note that this code won't work directly on input elements. To make it work, wrap your input field in a <div> and apply the attribute to that <div> instead.

%%spacer-2rem%%

[stroke="gradient"]

%%spacer-2rem%%

%%resource_divider%%

Guide: Getting Stroke Gradient Code From Figma✌

Step 1: Convert Stroke to Fill

%%spacer-2rem%%

To get the stroke gradient code you need to first convert the stroke into fill by pressing SHIFT + X

%%spacer-3rem%%

Step 2: Get The CSS Code

%%spacer-2rem%%

Right click on the element -> Copy/Paste as -> Copy as Code -> CSS

%%spacer-2rem%%

Then paste the code you just copied on to the canvas

%%spacer-2rem%%

%%spacer-3rem%%

Step 3: Copy and Paste the Gradient

%%spacer-2rem%%

Find the background property and copy the gradient value and paste it in your code

%%spacer-2rem%%