Connect with us!

Website Card tutorial Multi gradient Color using HTML and CSS VSCode Editor

Salow
February 3, 2022
CSS

A card is a flexible and extensible content container. It is used as a thumbnail for images or to show the profile of an user.

Have you ever wondered how to create one using HTML5 and CSS3.

The most important properties we use to create website card are:

The background property of CSS sets the background of an element.

The linear-gradient() property is a CSS function creates an image consisting of a progressive transition between two or more colors.

Here is the CSS class for implementing it.

Table of Contents

Multi gradient Color Code Block

.gradient-card {
  left: 5%;
  width: 400px;
  height: 200px;
  background: linear-gradient(to right,
    #40e0d0, #ff8c00, #ff0080);
  position: absolute;
  border-radius: 10px;
}

Yay! We have created a gradient card using CSS. Its very simple to use the class above and create this element.

Here is the output:

Triple Gradient Color

You can find the complete coding tutorial in the following Youtube video.

Video Tutorial for Creating Website Card

card multicolor gradient shorts

Here is the complete code of HTML and CSS for creating Website Card Multi Color gradient

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .gradient-card {
        left: 5%;
        width: 400px;
        height: 200px;
        background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
        position: absolute;
        border-radius: 10px;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Color Gradient Card</h1>
    <div class="gradient-card"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Website card using CSS and HTML. Good luck and happy coding !