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.


<!DOCTYPE html>
        <link rel="stylesheet" href="styles.css">
        <title>Gradient border</title>
        <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.

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.


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.


Leave a Reply

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

You are commenting using your 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: