├── README.md
├── assets
    ├── css
    │   └── styles.css
    └── scss
    │   ├── base
    │       └── _base.scss
    │   ├── components
    │       ├── _breakpoints.scss
    │       └── _card.scss
    │   ├── config
    │       └── _variables.scss
    │   └── styles.scss
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Gradient Border Card
 2 | ## [Watch it on youtube](https://youtu.be/3wzOg3LfbPM)
 3 | ### Responsive Gradient Border Card
 4 | 
 5 | - Responsive Gradient Border Card Using HTML & CSS
 6 | - Contains glowing elements.
 7 | - With hover effect on hover.
 8 | - Developed first with the Mobile First methodology, then for desktop.
 9 | 
10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
11 | 
12 | ![preview img](/preview.png)
13 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*=============== GOOGLE FONTS ===============*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  3 | /*=============== VARIABLES CSS ===============*/
  4 | :root {
  5 |   /*========== Colors ==========*/
  6 |   /*Color mode HSL(hue, saturation, lightness)*/
  7 |   --white-color: #fff;
  8 |   --black-color: hsl(210, 12%, 15%);
  9 |   --body-color: hsl(210, 16%, 12%);
 10 |   --container-color: hsl(210, 24%, 8%);
 11 |   /*========== Font and typography ==========*/
 12 |   /*.5rem = 8px | 1rem = 16px ...*/
 13 |   --body-font: "Poppins", sans-serif;
 14 |   --h2-font-size: 1.25rem;
 15 |   --normal-font-size: .938rem;
 16 | }
 17 | @media screen and (min-width: 1024px) {
 18 |   :root {
 19 |     --h2-font-size: 1.5rem;
 20 |     --normal-font-size: 1rem;
 21 |   }
 22 | }
 23 | 
 24 | /*=============== BASE ===============*/
 25 | * {
 26 |   box-sizing: border-box;
 27 |   padding: 0;
 28 |   margin: 0;
 29 | }
 30 | 
 31 | body {
 32 |   font-family: var(--body-font);
 33 |   font-size: var(--normal-font-size);
 34 |   background-color: var(--body-color);
 35 | }
 36 | 
 37 | a {
 38 |   text-decoration: none;
 39 | }
 40 | 
 41 | /*=============== CARD ===============*/
 42 | .container {
 43 |   display: grid;
 44 |   place-items: center;
 45 |   margin-inline: 1.5rem;
 46 | }
 47 | 
 48 | .card__container, .card__article {
 49 |   display: grid;
 50 |   gap: 2rem;
 51 | }
 52 | .card__container {
 53 |   padding-block: 4.5rem;
 54 | }
 55 | .card__article {
 56 |   --hue-1: 210;
 57 |   --hue-2: 238;
 58 |   position: relative;
 59 |   justify-items: center;
 60 |   color: var(--white-color);
 61 |   text-align: center;
 62 |   padding: 4rem 2rem 3rem;
 63 |   border: 4px solid transparent;
 64 |   background: linear-gradient(var(--container-color), var(--container-color)) padding-box, linear-gradient(135deg, hsl(var(--hue-1), 85%, 70%) 0%, var(--container-color), var(--container-color), hsl(var(--hue-2), 70%, 55%) 100%) border-box;
 65 |   border-radius: 1.25rem;
 66 |   overflow: hidden;
 67 | }
 68 | .card__shape-1 {
 69 |   position: relative;
 70 |   width: 148px;
 71 |   height: 148px;
 72 |   background: linear-gradient(140deg, hsl(var(--hue-1), 75%, 25%) 3%, hsl(var(--hue-2), 65%, 45%) 100%);
 73 |   border-radius: 2rem;
 74 |   z-index: 2;
 75 | }
 76 | .card__shape-2 {
 77 |   width: 116px;
 78 |   height: 116px;
 79 |   background: linear-gradient(140deg, hsl(var(--hue-1), 70%, 50%) 3%, hsl(var(--hue-2), 95%, 45%) 100%);
 80 |   border-radius: 1.5rem;
 81 | }
 82 | .card__shape-3 {
 83 |   width: 76px;
 84 |   height: 76px;
 85 |   background: linear-gradient(140deg, hsl(var(--hue-1), 85%, 60%) 3%, hsl(var(--hue-2), 85%, 60%) 100%);
 86 |   border-radius: 1rem;
 87 |   display: grid;
 88 |   place-items: center;
 89 | }
 90 | .card__shape-2, .card__shape-3 {
 91 |   position: absolute;
 92 |   inset: 0;
 93 |   margin: auto;
 94 | }
 95 | .card__icon {
 96 |   font-size: 3rem;
 97 | }
 98 | .card__data {
 99 |   z-index: 3;
100 | }
101 | .card__title {
102 |   font-size: var(--h2-font-size);
103 |   margin-bottom: 0.25rem;
104 |   font-weight: 600;
105 | }
106 | .card__description {
107 |   margin-bottom: 1.5rem;
108 | }
109 | .card__button {
110 |   display: inline-block;
111 |   background-color: var(--white-color);
112 |   padding: 1rem 1.5rem;
113 |   border-radius: 0.5rem;
114 |   color: var(--black-color);
115 |   font-weight: 500;
116 | }
117 | .card__orange {
118 |   --hue-1: 300;
119 |   --hue-2: 30;
120 | }
121 | .card__green {
122 |   --hue-1: 180;
123 |   --hue-2: 50;
124 | }
125 | .card__scale-1 {
126 |   width: 148px;
127 |   height: 148px;
128 |   background: linear-gradient(140deg, hsl(var(--hue-1), 70%, 50%) 3%, hsl(var(--hue-2), 95%, 45%) 100%);
129 |   border-radius: 2rem;
130 |   top: 4rem;
131 | }
132 | .card__scale-2 {
133 |   width: 116px;
134 |   height: 116px;
135 |   background: var(--container-color);
136 |   border-radius: 1.5rem;
137 |   top: 5rem;
138 | }
139 | .card__scale-1, .card__scale-2 {
140 |   position: absolute;
141 |   filter: blur(24px);
142 |   transition: transform 0.3s ease-in;
143 | }
144 | .card__article:hover .card__scale-1 {
145 |   transform: scale(6);
146 | }
147 | .card__article:hover .card__scale-2 {
148 |   transform: scale(6);
149 |   transition-delay: 0.1s;
150 | }
151 | 
152 | /*=============== BREAKPOINTS ===============*/
153 | /* For small devices */
154 | @media screen and (max-width: 320px) {
155 |   .container {
156 |     margin-inline: 1rem;
157 |   }
158 |   .card__article {
159 |     padding: 2rem 1rem;
160 |   }
161 |   .card__scale-1 {
162 |     top: 2rem;
163 |   }
164 |   .card__scale-2 {
165 |     top: 3rem;
166 |   }
167 | }
168 | /* For medium devices */
169 | @media screen and (min-width: 576px) {
170 |   .card__container {
171 |     grid-template-columns: 328px;
172 |   }
173 | }
174 | @media screen and (min-width: 768px) {
175 |   .card__container {
176 |     grid-template-columns: repeat(2, 328px);
177 |   }
178 | }
179 | /* For large devices */
180 | @media screen and (min-width: 1120px) {
181 |   .container {
182 |     height: 100vh;
183 |   }
184 |   .card__container {
185 |     grid-template-columns: repeat(3, 345px);
186 |   }
187 |   .card__article {
188 |     padding: 4.5rem 2rem 3.5rem;
189 |   }
190 | }


--------------------------------------------------------------------------------
/assets/scss/base/_base.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BASE ===============*/
 2 | *{
 3 | 	box-sizing: border-box;
 4 | 	padding: 0;
 5 | 	margin: 0;
 6 | }
 7 | 
 8 | body{
 9 | 	font-family: var(--body-font);
10 | 	font-size: var(--normal-font-size);
11 | 	background-color: var(--body-color);
12 | }
13 | 
14 | a{
15 | 	text-decoration: none;
16 | }


--------------------------------------------------------------------------------
/assets/scss/components/_breakpoints.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BREAKPOINTS ===============*/
 2 | /* For small devices */
 3 | @media screen and (max-width: 320px){
 4 |    .container{
 5 |       margin-inline: 1rem;
 6 |    }
 7 | 
 8 |    .card{
 9 |       &__article{
10 |          padding: 2rem 1rem;
11 |       }
12 |       &__scale-1{
13 |          top: 2rem;
14 |       }
15 |       &__scale-2{
16 |          top: 3rem;
17 |       }
18 |    }
19 | }
20 | 
21 | /* For medium devices */
22 | @media screen and (min-width: 576px){
23 |    .card__container{
24 |       grid-template-columns: 328px;
25 |    }
26 | }
27 | 
28 | @media screen and (min-width: 768px){
29 |    .card__container{
30 |       grid-template-columns: repeat(2, 328px);
31 |    }
32 | }
33 | 
34 | /* For large devices */
35 | @media screen and (min-width: 1120px){  
36 |    .container{
37 |       height: 100vh;
38 |    }
39 | 
40 |    .card{
41 |       &__container{
42 |          grid-template-columns: repeat(3, 345px);
43 |       }
44 |       &__article{
45 |          padding: 4.5rem 2rem 3.5rem;
46 |       }
47 |    }
48 | }


--------------------------------------------------------------------------------
/assets/scss/components/_card.scss:
--------------------------------------------------------------------------------
  1 | /*=============== CARD ===============*/
  2 | .container{
  3 |    display: grid;
  4 |    place-items: center;
  5 |    margin-inline: 1.5rem;
  6 | }
  7 | 
  8 | .card{
  9 |    &__container,
 10 |    &__article{
 11 |       display: grid;
 12 |       gap: 2rem;
 13 |    }
 14 |    &__container{
 15 |       padding-block: 4.5rem;
 16 |    }
 17 |    &__article{
 18 |       --hue-1: 210;
 19 |       --hue-2: 238;
 20 |       position: relative;
 21 |       justify-items: center;
 22 |       color: var(--white-color);
 23 |       text-align: center;
 24 |       padding: 4rem 2rem 3rem;
 25 |       border: 4px solid transparent;
 26 |       background: linear-gradient(
 27 |                   var(--container-color), 
 28 |                   var(--container-color)) padding-box,
 29 |                   
 30 |                   linear-gradient(135deg, 
 31 |                   hsl(var(--hue-1), 85%, 70%) 0%, 
 32 |                   var(--container-color),
 33 |                   var(--container-color),
 34 |                   hsl(var(--hue-2), 70%, 55%) 100%) border-box;
 35 |       border-radius: 1.25rem ;
 36 |       overflow: hidden;
 37 |    }
 38 |    // shapes card
 39 |    &__shape-1{
 40 |       position: relative;
 41 |       width: 148px;
 42 |       height: 148px;
 43 |       background: linear-gradient(140deg, 
 44 |                   hsl(var(--hue-1), 75%, 25%) 3%, 
 45 |                   hsl(var(--hue-2), 65%, 45%) 100%);
 46 |       border-radius: 2rem;
 47 |       z-index: 2;
 48 |    }
 49 |    &__shape-2{
 50 |       width: 116px;
 51 |       height: 116px;
 52 |       background: linear-gradient(140deg, 
 53 |                   hsl(var(--hue-1), 70%, 50%) 3%, 
 54 |                   hsl(var(--hue-2), 95%, 45%) 100%);
 55 |       border-radius: 1.5rem;
 56 |    }
 57 |    &__shape-3{
 58 |       width: 76px;
 59 |       height: 76px;
 60 |       background: linear-gradient(140deg, 
 61 |                   hsl(var(--hue-1), 85%, 60%) 3%, 
 62 |                   hsl(var(--hue-2), 85%, 60%) 100%);
 63 |       border-radius: 1rem;
 64 |       display: grid;
 65 |       place-items: center;
 66 |    }
 67 |    &__shape-2,
 68 |    &__shape-3{
 69 |       position: absolute;
 70 |       inset: 0;
 71 |       margin: auto;
 72 |    }
 73 |    &__icon{
 74 |       font-size: 3rem;
 75 |    }
 76 |    &__data{
 77 |       z-index: 3;
 78 |    }
 79 |    &__title{
 80 |       font-size: var(--h2-font-size);
 81 |       margin-bottom: .25rem;
 82 |       font-weight: 600;
 83 |    }
 84 |    &__description{
 85 |       margin-bottom: 1.5rem;
 86 |    }
 87 |    &__button{
 88 |       display: inline-block;
 89 |       background-color: var(--white-color);
 90 |       padding: 1rem 1.5rem;
 91 |       border-radius: .5rem;
 92 |       color: var(--black-color);
 93 |       font-weight: 500;
 94 |    }
 95 |    // Color change
 96 |    &__orange{
 97 |       --hue-1: 300;
 98 |       --hue-2: 30;
 99 |    }
100 |    &__green{
101 |       --hue-1: 180;
102 |       --hue-2: 50;
103 |    }
104 |    // Shapes scale
105 |    &__scale-1{
106 |       width: 148px;
107 |       height: 148px;
108 |       background: linear-gradient(140deg, 
109 |                   hsl(var(--hue-1), 70%, 50%) 3%, 
110 |                   hsl(var(--hue-2), 95%, 45%) 100%);
111 |       border-radius: 2rem;
112 |       top: 4rem;
113 |    }
114 |    &__scale-2{
115 |       width: 116px;
116 |       height: 116px;
117 |       background: var(--container-color);
118 |       border-radius: 1.5rem;
119 |       top: 5rem;
120 |    }
121 |    &__scale-1,
122 |    &__scale-2{
123 |       position: absolute;
124 |       filter: blur(24px);
125 |       transition: transform .3s ease-in;
126 |    }
127 |    // Shapes scale animation
128 |    &__article:hover .card__scale-1{
129 |       transform: scale(6);
130 |    }
131 |    &__article:hover .card__scale-2{
132 |       transform: scale(6);
133 |       transition-delay: .1s;
134 |    }
135 | }


--------------------------------------------------------------------------------
/assets/scss/config/_variables.scss:
--------------------------------------------------------------------------------
 1 | /*=============== GOOGLE FONTS ===============*/
 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
 3 | 
 4 | /*=============== VARIABLES CSS ===============*/
 5 | :root{
 6 |    /*========== Colors ==========*/
 7 |    /*Color mode HSL(hue, saturation, lightness)*/
 8 |    --white-color: #fff;
 9 |    --black-color: hsl(210, 12%, 15%);
10 |    --body-color: hsl(210, 16%, 12%);
11 |    --container-color: hsl(210, 24%, 8%);
12 | 
13 |    /*========== Font and typography ==========*/
14 |    /*.5rem = 8px | 1rem = 16px ...*/
15 |    --body-font: 'Poppins', sans-serif;
16 | 
17 |    --h2-font-size: 1.25rem;
18 |    --normal-font-size: .938rem;
19 | 
20 |    // Responsive typography
21 |    @media screen and (min-width: 1024px){
22 |       --h2-font-size: 1.5rem;
23 |       --normal-font-size: 1rem;
24 |    }
25 | }


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'config/variables';
2 | @import 'base/base';
3 | @import 'components/card';
4 | @import 'components/breakpoints';


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |       <!--=============== REMIXICONS ===============-->
 8 |       <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
 9 | 
10 |       <!--=============== CSS ===============-->
11 |       <link rel="stylesheet" href="assets/css/styles.css">
12 | 
13 |       <title>Responsive gradient border card - Bedimcode</title>
14 |    </head>
15 |    <body>
16 |       <div class="container">
17 |          <div class="card__container">
18 |             <article class="card__article">
19 |                <div class="card__scale-1"></div>
20 |                <div class="card__scale-2"></div>
21 | 
22 |                <div class="card__shape-1">
23 |                   <div class="card__shape-2"></div>
24 |                   <div class="card__shape-3">
25 |                      <i class="ri-flashlight-line card__icon"></i>
26 |                   </div>
27 |                </div>
28 |    
29 |                <div class="card__data">
30 |                   <h2 class="card__title">Awesome Card 01</h2>
31 |                   
32 |                   <p class="card__description">
33 |                      Gradient card, with bright edges 
34 |                      that gives it a cool look.
35 |                   </p>
36 | 
37 |                   <a href="#" class="card__button">
38 |                      Continue learning
39 |                   </a>
40 |                </div>
41 |             </article>
42 |    
43 |             <article class="card__article card__orange">
44 |                <div class="card__scale-1"></div>
45 |                <div class="card__scale-2"></div>
46 | 
47 |                <div class="card__shape-1">
48 |                   <div class="card__shape-2"></div>
49 |                   <div class="card__shape-3">
50 |                      <i class="ri-fire-line card__icon"></i>
51 |                   </div>
52 |                </div>
53 |    
54 |                <div class="card__data">
55 |                   <h2 class="card__title">Awesome Card 02</h2>
56 | 
57 |                   <p class="card__description">
58 |                      Gradient card, with bright edges 
59 |                      that gives it a cool look.
60 |                   </p>
61 | 
62 |                   <a href="#" class="card__button">
63 |                      Continue learning
64 |                   </a>
65 |                </div>
66 |             </article>
67 |    
68 |             <article class="card__article card__green">
69 |                <div class="card__scale-1"></div>
70 |                <div class="card__scale-2"></div>
71 | 
72 |                <div class="card__shape-1">
73 |                   <div class="card__shape-2"></div>
74 |                   <div class="card__shape-3">
75 |                      <i class="ri-shining-line card__icon"></i>
76 |                   </div>
77 |                </div>
78 |    
79 |                <div class="card__data">
80 |                   <h2 class="card__title">Awesome Card 03</h2>
81 | 
82 |                   <p class="card__description">
83 |                      Gradient card, with bright edges 
84 |                      that gives it a cool look.
85 |                   </p>
86 | 
87 |                   <a href="#" class="card__button">
88 |                      Continue learning
89 |                   </a>
90 |                </div>
91 |             </article>
92 |          </div>
93 |       </div>
94 |    </body>
95 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-gradient-border-card/505c3d3e4163ed72b5398cbb989a86357e19f937/preview.png


--------------------------------------------------------------------------------