card information

Open In Editor Publish Your Code

<div class="container">
  <div style="--clr:#89ec5b;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Designing</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#eb5ae5;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Development</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#5b98eb;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>SEO</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 60px 0;
  gap: 60px;
}
.container .box {
  position: relative;
  width: 300px;
  height: 350px;
  background: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before {
  content: "";
  position: absolute;
  inset: -10px 50px;
  border-top: 4px solid var(--clr);
  border-bottom: 4px solid var(--clr);
  z-index: -1;
  transform: skewY(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover:before {
  transform: skewY(0);
  inset: -10px 40px;
}

.container .box::after {
  content: "";
  position: absolute;
  inset: 60px -10px;
  border-left: 4px solid var(--clr);
  border-right: 4px solid var(--clr);
  z-index: -1;
  transform: skew(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover::after {
  transform: skew(0);
  inset: 40px -10px;
}
.container .box .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .box .content .icon {
  color: var(--clr);
  width: 80px;
  height: 80px;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 6px var(--clr);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  background: #2e2e2e;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .icon {
  background: var(--clr);
  color: #2e2e2e;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 300px var(--clr);
}
.container .box .content .text h3 {
  font-size: 1.5em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3 {
  color: #2e2e2e;
}
.container .box .content .text p {
  color: #999;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text p {
  color: #2e2e2e;
}
.container .box .content .text a {
  position: relative;
  background: var(--clr);
  color: #2e2e2e;
  padding: 8px 15px;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text a {
  background: #2e2e2e;
  color: var(--clr);
}

card information

Recommended

Responsive Card

HTML Login Registration Form with 3D Card Effect

Card login

HTML

CSS

JS

Recommended

Responsive Card

HTML Login Registration Form with 3D Card Effect

Card login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS