How to Apply Gradient Border to an Image Using HTML and CSS

By using CSS, It is easy to apply a gradient effect to a image. The similar can be useful for other kind of UI elements .In this article we are going to discuss how we can apply gradient border to an image , using HTML and CSS. 

Step 1: HTML Structure 

First, You need to create a image element in your HTML that you would want to apply gradient effect.

Here's a basic example of how your HTML structure might look:

    <div class="css-gradients">
        <img src="./image.jpg" alt="" width="25%">
    </div>

The Above HTML code snippet ,contain a <div> element with class css-gradients and inside the div the image tag specifies the image path, width is set to 25%.

Step 2: CSS Style

To Apply Gradient Effect on Image , this CSS class has to be applied to the class gradient-image. Here are the essential styles:

Here is how your CSS should look:

    body {
        background-color: #000;
    }

    .css-gradients img {
        background: linear-gradient(#fff, #fff) padding-box, 
                    linear-gradient(45deg, #0fd850, #f9f047) border-box;
        border: 5px solid transparent;
        border-radius: 50px;
    }

The Above CSS, set the webpage backdround black and style image inside the div with class css-gradients. It specify border and set the background of image as mix of green and white gradient.

Conclusion 

Creating an image that is gradient in effect with CSS is a simple task and will greatly improve the visual look of your website. Following the above steps, you will make any images look more attractive, with the standards of modern web design. Use a simple trick to apply style to your image in just a few lines of code.