Animated Responsive Neon Glass Cards In CSS

Preview:

Description:

Responsive, responsive, and Neon glass style cards written in pure HTML/CSS.

How to use it:

1. The required markup structure for the cards.

<section class="neon bd-container">
  <div class="neon__container">
    <div class="neon__card">
      <svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378 
          43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522 
          24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44 
          28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4 
          33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629 
          8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067 
          4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403 
          7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674 
          17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764 
          21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844 
          29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632 
          30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012 
          30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862 
          23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044 
          20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
      </svg>
      <h1 class="neon__title">Ticket 01</h1>
      <p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
      <a href="#" class="neon__button">
        Buy Now 
        <svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583 
            33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332 
            40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056 
            33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634 
            14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099 
            4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178 
            24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387 
            21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041 
            22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392 
            22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637 
            9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013 
            13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
        </svg>
      </a>
    </div>
    <div class="neon__card">
      <svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378 
          43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522 
          24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44 
          28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4 
          33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629 
          8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067 
          4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403 
          7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674 
          17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764 
          21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844 
          29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632 
          30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012 
          30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862 
          23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044 
          20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
      </svg>
      <h1 class="neon__title">Ticket 02</h1>
      <p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
      <a href="#" class="neon__button">
        Buy Now 
        <svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583 
            33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332 
            40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056 
            33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634 
            14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099 
            4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178 
            24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387 
            21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041 
            22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392 
            22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637 
            9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013 
            13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
        </svg>
      </a>
    </div>
    <div class="neon__card">
      <svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378 
          43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522 
          24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44 
          28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4 
          33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629 
          8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067 
          4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403 
          7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674 
          17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764 
          21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844 
          29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632 
          30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012 
          30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862 
          23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044 
          20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
      </svg>
      <h1 class="neon__title">Ticket 03</h1>
      <p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
      <a href="#" class="neon__button">
        Buy Now 
        <svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583 
            33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332 
            40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056 
            33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634 
            14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099 
            4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178 
            24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387 
            21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041 
            22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392 
            22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637 
            9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013 
            13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
        </svg>
      </a>
    </div>
  </div>
</section>

2. The core CSS styles for the cards.

/*===== VARIABLES CSS =====*/
:root {
  /*========== Colors ==========*/
  --body-color: #020318;
  --text-color-light: #FFF;
  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
  /*========== Box, Drop & Text Shadow ==========*/
  --box-shadow-inset: inset 0 22px 56px -36px rgba(255, 255, 255, .5), inset 0 4px 5px -4px rgba(255, 255, 255, 1), inset 0 -31px 34px -32px rgba(96, 68, 144, .3), inset 0 39px 50px -34px rgba(202, 172, 255, .3), inset 0 2px 9px rgba(154, 146, 210, .3), inset 0 1px 10px rgba(227, 222, 255, .2);
  --drop-shadow: 0 0 8px rgba(161, 165, 247, .8);
  --text-shadow: 0 0 8px rgba(161, 165, 247, .8);
  --box-shadow-inset-button: inset 0 2px 7px -9px rgba(255, 255, 255, .5), inset 0 1px 2px -1px rgba(255, 255, 255, 1), inset 0 -20px 16px -32px rgba(96, 68, 144, .3), inset 0 28px 25px -24px rgba(202, 172, 255, .3), inset 0 1px 4px rgba(154, 146, 210, .3), inset 0 1px 10px rgba(227, 222, 255, .2);
  /*========== Box, Drop & Text Shadow Hover ==========*/
  --box-shadow-inset-hover: inset 0 19px 28px -18px rgba(255, 255, 255, .5), inset 0 4px 6px -3px rgba(255, 255, 255, 1), inset 0 -51px 44px -42px rgba(96, 68, 144, .3), inset 0 59px 60px -32px rgba(202, 172, 255, .3), inset 0 4px 16px rgba(154, 146, 210, .3), inset 0 2px 25px rgba(227, 222, 255, .23);
  --drop-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
  --text-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
  --box-shadow-inset-button-hover: inset 0 4px 7px -4px rgba(255, 255, 255, .5), inset 0 1px 2px -1px rgba(255, 255, 255, 1), inset 0 -20px 16px -32px rgba(96, 68, 144, .3), inset 0 28px 25px -20px rgba(202, 172, 255, .3), inset 0 1px 4px rgba(154, 146, 210, .3), inset 0 1px 16px rgba(227, 222, 255, .2);
  /*========== Filter Blur ==========*/
  --filter-blur: blur(100px);
}
/*========== CARD NEON ==========*/
.neon,
.neon__container {
  display: grid;
  align-items: center;
}
.neon {
  padding: 2.5rem 0;
}
.neon__container {
  grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
  row-gap: 3.5rem;
  column-gap: 2.5rem;
}
.neon__card {
  background: rgba(255, 255, 255, 0.01);
  color: var(--text-color-light);
  box-shadow: var(--box-shadow-inset);
  backdrop-filter: var(--filter-blur);
  padding: 3.5rem 1.5rem 2rem;
  border-radius: 3rem;
  text-align: center;
}
.neon__icon {
  width: 120px;
  fill: var(--text-color-light);
  filter: drop-shadow(var(--drop-shadow));
  margin-bottom: .25rem;
}
.neon__title,
.neon__description {
  text-shadow: var(--text-shadow);
}
.neon__title {
  font-size: var(--biggest-font-size);
  margin-bottom: .25rem;
}
.neon__description {
  text-align: initial;
  margin-bottom: 1.5rem;
}
.neon__button-icon {
  width: 1.2rem;
  margin-left: .5rem;
  fill: var(--text-color-light);
  filter: drop-shadow(var(--drop-shadow));
}
.neon__button {
  box-shadow: var(--box-shadow-inset-button);
  color: var(--text-color-light);
  text-shadow: var(--text-shadow);
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 1rem;
}
.neon__button:hover {
  box-shadow: var(--box-shadow-inset-button-hover);
}

/* Card neon hover */
.neon__card:hover {
  box-shadow: var(--box-shadow-inset-hover);
}
.neon__card:hover .neon__icon {
  filter: drop-shadow(var(--drop-shadow-hover));
}
.neon__card:hover .neon__title,
.neon__card:hover .neon__description {
  text-shadow: var(--text-shadow-hover);
}
.neon__card,
.neon__icon,
.neon__title,
.neon__description,
.neon__button {
  transition: .3s;
}

3. Make those cards fully responsive on small screens.

/*========== MEDIA QUERIES ==========*/

/* For small devices */
@media screen and (max-width: 359px) {
  .neon__container {
    grid-template-columns: 1fr;
  }
  .neon__card {
    padding: 2rem 1rem 1.5rem;
    border-radius: 2rem;
  }
  .neon__icon {
    width: 80px;
  }
  .neon__title {
    font-size: var(--h1-font-size);
  }
  .neon__description {
    font-size: var(--smaller-font-size);
  }
  .neon__button {
    padding: 1rem;
    font-size: var(--smaller-font-size);
    border-radius: .6rem;
  }
  .neon__button-icon {
    width: 1rem;
  }
}

/* For long screens */
@media screen and (min-width: 1024px) {
  .bd-container {
    margin-left: auto;
    margin-right: auto;
  }
  .neon {
    height: 100vh;
  }
}