Gradient borders – CSS

In this post, we will learn to create gradient borders in CSS. We will know how to apply gradient borders in CSS to make the content of a webpage look awesome.

How to create gradient borders in CSS?

Here are the steps that I followed.

  1. To create a gradient border, I used two <div> elements. The outer div acts as a wrapper element and the inner <div> contains some text.
  2. I applied the linear gradient to the outer div.
  3. Some padding to the outer div. The padding acts as a border.
  4. I applied a color as a background for the inner div. This background color covers the outer div except the padding I applied on the outer div.

Now let’s see the code.

gradient_border.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <title>Gradient border</title>
    </head>
    <body>
        <div class="outer-div">
            <div class="inner-div">
            Lorem ipsum dolor sit amet consectetur adipisicing 
            elit. Vero pariatur corporis quaerat voluptatum eos 
            tempora temporibus nisi voluptates sed, exercitationem 
            sequi dolore culpa incidunt accusamus, 
            quasi unde reprehenderit ea molestias.
            </div>
        </div>
    </body>
</html>

Here, you can see, that the outer <div> is just a wrapper for the inner <div> and the inner <div> contains the text. Now let’s see the CSS file.

styles.css

body {
    display: grid;
    background: #0d0d3a;
    height: 100vh;
    margin: 0;
    place-items: center;
  }
  
  .outer-div {
    max-width: 300px;
    background: linear-gradient(to right, #3bd1df, #dc2e74);
    padding: 3px;
  }
  
  .inner-div {
    color: white;
    background: #0d0d3a;
    padding: 35px;
  }

You can see here that I have applied a linear gradient to the outer div.

Now, let’s see the output.

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: