Animated Gradient Border Generator

Hello

Card Width200px

Card Height200px

Card Radius16px

Border Width8px

Border Fill150px

Card Color#000000

HTML&CSS Code

<style>
    .card {
        --card-height: 200px;
        --card-width: 200px;
        --card-radius: 16px;
        --border-width: 8px;
        --border-fill: 150px;
        --border-height: 482px;
  
        --card-color: #000000;
  
        position: relative;
        height: var(--card-height);
        width: var(--card-width);
        background: var(--card-color);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 1;
        border-radius: var(--card-radius);
    }
  
    .card::before {
        content: "";
        height: var(--border-height);
        width: var(--border-fill);
        background: linear-gradient(90deg, red, blue);
        position: absolute;
        z-index: 2;
        animation: rotate 3.5s linear infinite;
    }
  
    @keyframes rotate {
        from {
            transform: rotateZ(1deg);
        }
  
        to {
            transform: rotateZ(360deg);
        }
    }
  
    .card::after {
        content: "";
        height: calc(var(--card-height) - var(--border-width));
        width: calc(var(--card-width) - var(--border-width));
        background: var(--card-color);
        position: absolute;
        z-index: 2;
        border-radius: var(--card-radius);
    }
  
    .card-content {
        z-index: 3;
        font-size: 16px;
        font-family: system-ui;
        font-weight: bold;
        color: white;
        position: absolute;
    }
  </style>
  
  <div class="card">
    <div class="card-content">Hello</div>
  </div>

What is an online CSS Animated Gradient Border Generator?

The Online CSS Animated Gradient Border Generator is a convenient web tool designed to simplify the process of crafting animated borders with gradient effects using CSS (Cascading Style Sheets).

This tool features a user-friendly interface that empowers you to customize the appearance of animated borders to suit your specific needs.

Why use an online CSS Animated Gradient Border Generator?

To create an animated gradient border, We need to have a proper knowledge of animation and border properties of CSS, and it requires a lot of time to create a design for one element.

And that’s why we have created this web-based tool that helps you to create an animated border design for different elements. The tool is known as an “Animated Gradient Border Generator”.

Our online gradient border provides you with features like:

Color Customization: You can pick colors for the gradient, specifying different color stops.
Border Animation: You can set options for how the border should be animated. This might include animation duration, easing functions, and the direction of the animation.
Border Thickness: You can control the thickness of the animated border.
Copy CSS: Once you're satisfied with the result, the tool might provide you with the generated CSS code that you can copy and use in your web projects.

How to use Online CSS Animated Gradient Border Generator?

You can generate CSS code for gradient border by following these steps:

Set the Width and Height of the card using the given sliders.
Set the Card Border Radius, It depends on your design style.
Set the Border Width (Border thickness) according to your design style.
Set the Border Fill according to your design style and the card’s Width and Height.
Copy the HTML and CSS code. (This code is generated live as you make changes to the parameters.)