How to Design a Gradient Border with CSS

We’re not going to use the border property, but the end result will be a responsive image with a flexible gradient “border” around it. Let’s get started.

Step 1: Create a container that is always square at every screen size

To make the border responsive and flexible it needs to fit the width of its container while holding its shape. Let’s add our gradient border using <figure> because we’re going to put the border around an image. I think <figure> is more semantic than a <div> but feel free to use that instead.

<figure class="gradient">
</figure>

I’ve added the class .gradient because this element is going to become the gradient border around our image. Now we need to make it a fluid width square. Let’s make sure the width is always at 100% and then we’ll give it a height of 0. Now we can add a height that is equal to the container width using padding-top: 100%. The tag <figure> has a lot of margin by default. Let’s get rid of that by setting all margin values to 0.

.gradient {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0;
}

Step 2: Add a gradient to the container

I’ll create a simple left to right gradient with these values: background-image: linear-gradient(to right, #1695A3, #225378). You can play around with your gradient values until you find one you like. Now you should see a perfectly resizable square with a gradient background in your output. Here’s what our HTML and CSS looks like so far:

HTML

<figure class="gradient">
</figure>

CSS

.gradient {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0;
  background-image: linear-gradient(to right, #1695A3, #225378);
}

Step 3: Add an image (or any element you want) and position it in the center of the gradient container

Let’s add an image using the amazing services of Lorem Pixum. I’m going to use this image and you can too: https://picsum.photos/id/237/1000/1000. It doesn’t matter what image you use but it will look better if it’s…