Rainbow Card by admin

1 Add to Favorites

HTML Code
CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(to right, #f0f0f0 1px, transparent 1px),
    linear-gradient(to bottom, #f0f0f0 1px, transparent 1px), #fafafa;
  background-size: 40px 40px;
  font-family: system-ui, -apple-system, sans-serif;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}

.container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 4px;
  border-radius: 14px;
  transition: all 0.3s ease;
}

.container:has(.card:hover) {
  background: conic-gradient(
    from var(--angle),
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #54a0ff,
    #5f27cd,
    #ff6b6b
  );
  animation: spin 3s linear infinite;
}

.card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  position: relative;
  border-bottom: 3px solid transparent;
  background-image: linear-gradient(white, white) padding-box,
    conic-gradient(
        from var(--angle),
        #ff6b6b,
        #feca57,
        #48dbfb,
        #ff9ff3,
        #54a0ff,
        #5f27cd,
        #ff6b6b
      )
      border-box;
}

.card:hover {
  animation: spin 3s linear infinite;
}

.card:hover h2 {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #54a0ff
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-text 2s ease infinite;
}

@keyframes gradient-text {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

Uploaded 13th February 2026 Views 140 #rainbow #hover #border #card

CSSPortal @admin

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

Member since 25th June 2024

CSS Properties Used

There are 28 CSS properties used in the above example. Click to view and learn about each property.

HTML Tags Used

There are 5 HTML Tags used in the above example. Click to view and learn about each tag.

html body div h2 p