Rainbow Card by admin

0 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

Tags: #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

•Website•X (Twitter)

CSS Properties Used

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

margin padding box-sizing min-height display place-items background background-size font-family syntax initial-value inherits padding-bottom border-radius transition animation box-shadow max-width position border-bottom background-image background-clip color background-position font-size font-weight margin-bottom line-height

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