RKM CODE Abstract Design HTML CSS Code

Design 1 CSS Style

.abstract-container {
  justify-content: center;
  display: grid;
}

.abstract1 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #e74c3c, #8e44ad);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate1 5s linear infinite;
}

@keyframes rotate1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Design 1 HTML

<div class="abstract-container">
  <div class="abstract1"></div>
</div>

Design 2 CSS Style

.abstract-container {
  justify-content: center;
  display: grid;
}

.abstract2 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #3498db;
  animation: expand 3s ease-in-out infinite alternate;
}

@keyframes expand {
  0% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

Design 2 HTML

<div class="abstract-container">
  <div class="abstract2"></div>
</div>

Design 3 CSS Style

.abstract-container {
  justify-content: center;
  display: grid;
}

.abstract3 {
      width: 200px;
      height: 200px;
      background-color: #2ecc71;
      position: relative;
      animation: floating 3s ease-in-out infinite;
}
    .abstract3::before, .abstract3::after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      background-color: #f39c12;
      top: 20px;
      left: 20px;
    }
    .abstract3::after {
      top: auto;
      bottom: 20px;
      left: auto;
      right: 20px;
    }
    @keyframes floating {
      0% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
      100% { transform: translateY(0); }
    }

Design 3 HTML

<div class="abstract-container">
  <div class="abstract3"></div>
</div>

Design 4 CSS Style

.abstract-container {
  justify-content: center;
  display: grid;
}

.abstract4 {
      width: 200px;
      height: 200px;
      background: linear-gradient(45deg, #e67e22, #9b59b6);
      background-size: 20px 20px;
      animation: stripes 3s linear infinite;
}
    @keyframes stripes {
      0% { background-position: 0 0; }
      100% { background-position: 20px 20px; }
    }

Design 4 HTML

<div class="abstract-container">
  <div class="abstract4"></div>
</div>

Design 5 CSS Style

.abstract5 {
  width: 150px;
  height: 150px;
  background-color: #f1c40f;
  position: relative;
}
.abstract5::before, .abstract5::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
}
.abstract5::before {
  top: 10px;
  left: 10px;
}
.abstract5::after {
  bottom: 10px;
  right: 10px;
}

Design 5 HTML

<div class="abstract5"></div>

Design 6 CSS Style

.abstract6 {
  width: 150px;
  height: 150px;
  position: relative;
  animation: moveCircles 4s infinite ease-in-out;
}
.abstract6::before, .abstract6::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e74c3c;
}
.abstract6::before {
  top: 10px;
  left: 10px;
}
.abstract6::after {
  bottom: 10px;
  right: 10px;
  background-color: #8e44ad;
}
@keyframes moveCircles {
  0% { transform: translate(0, 0); }
  50% { transform: translate(50px, 50px); }
  100% { transform: translate(0, 0); }
}

Design 6 HTML

<div class="abstract6"></div>

Design 7 CSS Style

.abstract7 {
  width: 150px;
  height: 150px;
  background-color: #9b59b6;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Design 7 HTML

<div class="abstract7"></div>

Design 8 CSS Style

.abstract8 {
  width: 120px;
  height: 120px;
  background-color: #16a085;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: rotateHexagon 4s linear infinite;
}
@keyframes rotateHexagon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Design 8 HTML

<div class="abstract8"></div>

Design 9 CSS Style

.abstract9 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: transparent;
  animation: spinCircles 3s infinite;
}
.abstract9::before, .abstract9::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f39c12;
}
.abstract9::before {
  top: 10px;
  left: 10px;
}
.abstract9::after {
  bottom: 10px;
  right: 10px;
  background-color: #e74c3c;
}
@keyframes spinCircles {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Design 9 HTML

<div class="abstract9"></div>

Design 10 CSS Style

.abstract10 {
  width: 200px;
  height: 150px;
  background-color: #34495e;
  position: relative;
  clip-path: polygon(0% 10%, 100% 10%, 100% 40%, 0% 40%);
  animation: wave 5s ease-in-out infinite;
}
@keyframes wave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

Design 10 HTML

<div class="abstract10"></div>

Design 11 CSS Style

.abstract11 {
  width: 150px;
  height: 150px;
  background-color: #2ecc71;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
  animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
  0% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.6); }
  100% { box-shadow: 0 0 20px rgba(0, 255, 0, 1); }
}

Design 11 HTML

<div class="abstract11"></div>

Design 12 CSS Style

.abstract12 {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  border-radius: 50%;
  animation: morph 4s infinite alternate;
}
@keyframes morph {
  0% { border-radius: 50%; transform: scale(1); }
  50% { border-radius: 10%; transform: scale(1.3); }
  100% { border-radius: 50%; transform: scale(1); }
}

Design 12 HTML

<div class="abstract12"></div>

Design 13 CSS Style

.abstract13 {
  width: 200px;
  height: 200px;
  background-color: #9b59b6;
  position: relative;
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}
.abstract13::before, .abstract13::after {
  content: '';
  position: absolute;
  background-color: #8e44ad;
  width: 30px;
  height: 30px;
  transform: rotate(-30deg);
}
.abstract13::before {
  top: 20px;
  left: 20px;
}
.abstract13::after {
  bottom: 20px;
  right: 20px;
}

Design 13 HTML

<div class="abstract13"></div>

Design 14 CSS Style

.abstract14 {
  width: 100px;
  height: 100px;
  background-color: #f39c12;
  position: relative;
  animation: spinSquares 4s infinite linear;
}
.abstract14::before, .abstract14::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  top: 0;
  left: 0;
  animation: spinSquares 4s infinite linear;
}
.abstract14::after {
  bottom: 0;
  right: 0;
  background-color: #2ecc71;
}
@keyframes spinSquares {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Design 14 HTML

<div class="abstract14"></div>

Design 15 CSS Style

.abstract15 {
  width: 150px;
  height: 150px;
  background-color: #f1c40f;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

Design 15 HTML

<div class="abstract15"></div>

Design 16 CSS Style

.abstract16 {
  width: 200px;
  height: 100px;
  background: repeating-linear-gradient(45deg, #34495e, #34495e 10px, transparent 10px, transparent 20px);
}

Design 16 HTML

<div class="abstract16"></div>

Design 17 CSS Style

.abstract17 {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  position: relative;
  overflow: hidden;
}
.abstract17::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 150%;
  background-color: #16a085;
  animation: liquidWave 3s infinite ease-in-out;
}
@keyframes liquidWave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

Design 17 HTML

<div class="abstract17"></div>

Design 18 CSS Style

    .abstract18 {
      width: 200px;
      height: 200px;
      background-color: #9b59b6;
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;
    }
    .abstract18 div {
      background-color: #f39c12;
      border-radius: 50%;
    }

Design 18 HTML

    <div class="abstract18">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 19 CSS Style

    .abstract19 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #34495e;
    }
    .abstract19::before, .abstract19::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #1abc9c;
      animation: neonLines 3s infinite linear;
    }
    .abstract19::before {
      left: 50%;
      transform: translateX(-50%);
    }
    .abstract19::after {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    @keyframes neonLines {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

Design 19 HTML

    <div class="abstract19"></div>

Design 20 CSS Style

    .abstract20 {
      width: 200px;
      height: 100px;
      position: relative;
      background-color: #16a085;
    }
    .abstract20::before, .abstract20::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #f39c12;
      top: 0;
      left: 0;
      animation: shiftRectangles 3s infinite ease-in-out;
    }
    .abstract20::after {
      top: auto;
      bottom: 0;
      left: auto;
      right: 0;
      background-color: #e74c3c;
    }
    @keyframes shiftRectangles {
      0% { transform: translate(0, 0); }
      50% { transform: translate(50px, 50px); }
      100% { transform: translate(0, 0); }
    }

Design 20 HTML

    <div class="abstract20"></div>

Design 21 CSS Style

    .abstract21 {
      width: 200px;
      height: 100px;
      background-color: #e74c3c;
      position: relative;
      overflow: hidden;
    }
    .abstract21::before {
      content: '';
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 200%;
      background-color: #2ecc71;
      animation: wave 3s infinite ease-in-out;
    }
    @keyframes wave {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }

Design 21 HTML

    <div class="abstract21"></div>

Design 22 CSS Style

    .abstract22 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #f39c12;
      border-radius: 50%;
      overflow: hidden;
    }
    .abstract22::before, .abstract22::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #34495e;
      border-radius: 50%;
      animation: float 5s infinite ease-in-out;
    }
    .abstract22::before {
      top: 20%;
      left: 20%;
    }
    .abstract22::after {
      bottom: 20%;
      right: 20%;
    }
    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }

Design 22 HTML

    <div class="abstract22"></div>

Design 23 CSS Style

    .abstract23 {
      width: 200px;
      height: 200px;
      background-color: #1abc9c;
      position: relative;
      overflow: hidden;
    }
    .abstract23::before, .abstract23::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #9b59b6;
      animation: moveLines 2s infinite linear;
    }
    .abstract23::before {
      top: 0;
      left: 25%;
    }
    .abstract23::after {
      top: 0;
      right: 25%;
    }
    @keyframes moveLines {
      0% { transform: translateX(0); }
      100% { transform: translateX(100%); }
    }

Design 23 HTML

    <div class="abstract23"></div>

Design 24 CSS Style

    .abstract24 {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      position: relative;
      border-radius: 50%;
      overflow: hidden;
    }
    .abstract24::before, .abstract24::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #e74c3c;
      animation: radialLines 3s infinite ease-in-out;
    }
    .abstract24::before {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .abstract24::after {
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    @keyframes radialLines {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 24 HTML

    <div class="abstract24"></div>

Design 25 CSS Style

    .abstract25 {
      width: 20%;
      height: 40px;
      background-color: #2ecc71;
      position: absolute;
      animation: zigzag 4s infinite ease-in-out;
    }
    @keyframes zigzag {
      0% { transform: translateX(0); }
      50% { transform: translateX(100%); }
      100% { transform: translateX(0); }
    }

Design 25 HTML

    <div class="abstract25"></div>

Design 26 CSS Style

    .abstract26 {
      width: 200px;
      height: 200px;
      background-color: #9b59b6;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }
    .abstract26::before, .abstract26::after {
      content: '';
      position: absolute;
      width: 150px;
      height: 150px;
      background-color: #f39c12;
      border-radius: 50%;
      top: 0;
      left: 0;
    }
    .abstract26::after {
      background-color: #34495e;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

Design 26 HTML

    <div class="abstract26"></div>

Design 27 CSS Style

    .abstract27 {
      width: 200px;
      height: 200px;
      position: relative;
      display: flex;
      flex-wrap: wrap;
    }
    .abstract27 div {
      width: 50px;
      height: 50px;
      background-color: #f1c40f;
      margin: 5px;
      animation: colorChange 2s infinite alternate;
    }
    @keyframes colorChange {
      0% { background-color: #f1c40f; }
      100% { background-color: #2ecc71; }
    }

Design 27 HTML

    <div class="abstract27">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 28 CSS Style

    .abstract28 {
      width: 200px;
      height: 200px;
      background-color: #34495e;
      border-radius: 50%;
      position: relative;
    }
    .abstract28::before, .abstract28::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #e74c3c;
      border-radius: 50%;
      animation: bubble 4s infinite ease-in-out;
    }
    .abstract28::before {
      top: 10%;
      left: 20%;
    }
    .abstract28::after {
      top: 50%;
      left: 70%;
      background-color: #f39c12;
    }
    @keyframes bubble {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

Design 28 HTML

    <div class="abstract28"></div>

Design 29 CSS Style

    .abstract29 {
      width: 200px;
      height: 200px;
      background-color: #f39c12;
      position: relative;
      overflow: hidden;
    }
    .abstract29 div {
      width: 50px;
      height: 50px;
      background-color: #2ecc71;
      position: absolute;
      animation: floatBlock 4s infinite ease-in-out;
    }
    .abstract29 div:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
    .abstract29 div:nth-child(2) { top: 0; right: 0; animation-delay: 1s; }
    .abstract29 div:nth-child(3) { bottom: 0; left: 0; animation-delay: 2s; }
    .abstract29 div:nth-child(4) { bottom: 0; right: 0; animation-delay: 3s; }
    @keyframes floatBlock {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }

Design 29 HTML

    <div class="abstract29">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 30 CSS Style

    .abstract30 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #9b59b6;
      animation: rotateCubes 3s infinite linear;
    }
    .abstract30 div {
      width: 50px;
      height: 50px;
      background-color: #f39c12;
      position: absolute;
      top: 0;
      left: 0;
    }
    .abstract30 div:nth-child(1) { animation-delay: 0s; }
    .abstract30 div:nth-child(2) { animation-delay: 1s; top: 50px; left: 50px; }
    .abstract30 div:nth-child(3) { animation-delay: 2s; top: 100px; left: 100px; }
    @keyframes rotateCubes {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 30 HTML

    <div class="abstract30">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 31 CSS Style

    .abstract31 {
      width: 300px;
      height: 150px;
      background: linear-gradient(to right, #8e44ad, #f39c12);
      filter: blur(5px);
      margin-bottom: 20px;
      animation: blurEffect 3s infinite alternate;
    }
    @keyframes blurEffect {
      0% { filter: blur(5px); }
      100% { filter: blur(0); }
    }

Design 31 HTML

    <div class="abstract31"></div>

Design 32 CSS Style

    .abstract32 {
      width: 200px;
      height: 200px;
      background-color: #9b59b6;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }
    .abstract32::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      background-color: #f39c12;
      border-radius: 50%;
      animation: spiral 5s infinite linear;
    }
    @keyframes spiral {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(720deg); }
    }

Design 32 HTML

    <div class="abstract32"></div>

Design 33 CSS Style

    .abstract33 {
      width: 300px;
      height: 150px;
      background: repeating-linear-gradient(45deg, #f39c12, #f39c12 10px, #3498db 10px, #3498db 20px);
      animation: moveStripes 3s infinite linear;
    }
    @keyframes moveStripes {
      0% { background-position: 0 0; }
      100% { background-position: 300px 300px; }
    }

Design 33 HTML

    <div class="abstract33"></div>

Design 34 CSS Style

    .abstract34 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #2ecc71;
    }
    .abstract34::before, .abstract34::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      animation: rotateTriangles 4s infinite ease-in-out;
    }
    .abstract34::before {
      top: 0;
      left: 0;
      border-bottom: 100px solid #f39c12;
    }
    .abstract34::after {
      bottom: 0;
      left: 0;
      border-top: 100px solid #9b59b6;
    }
    @keyframes rotateTriangles {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 34 HTML

    <div class="abstract34"></div>

Design 35 CSS Style

    .abstract35 {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }
    .abstract35::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #2ecc71;
      border-radius: 50%;
      animation: waveEffect 5s infinite linear;
    }
    @keyframes waveEffect {
      0% { transform: scale(0.5); }
      100% { transform: scale(2.5); }
    }

Design 35 HTML

    <div class="abstract35"></div>

Design 36 CSS Style

    .abstract36 {
      width: 200px;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
    }
    .abstract36 div {
      width: 50px;
      height: 50px;
      background-color: #e74c3c;
      animation: bounce 2s infinite alternate;
    }
    .abstract36 div:nth-child(odd) {
      animation-delay: 0.5s;
    }
    .abstract36 div:nth-child(even) {
      animation-delay: 1s;
    }
    @keyframes bounce {
      0% { transform: translateY(0); }
      100% { transform: translateY(-20px); }
    }

Design 36 HTML

    <div class="abstract36">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 37 CSS Style

    .abstract37 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #9b59b6;
      border-radius: 50%;
    }
    .abstract37::before, .abstract37::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #e74c3c;
      animation: ringEffect 4s infinite linear;
    }
    .abstract37::before {
      top: 20%;
      left: 20%;
    }
    .abstract37::after {
      bottom: 20%;
      right: 20%;
    }
    @keyframes ringEffect {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

Design 37 HTML

    <div class="abstract37"></div>

Design 38 CSS Style

    .abstract38 {
      width: 300px;
      height: 150px;
      display: flex;
      gap: 10px;
    }
    .abstract38 div {
      width: 50px;
      height: 50px;
      background-color: #f39c12;
      animation: slideSquares 3s infinite linear;
    }
    .abstract38 div:nth-child(1) { animation-delay: 0s; }
    .abstract38 div:nth-child(2) { animation-delay: 1s; }
    .abstract38 div:nth-child(3) { animation-delay: 2s; }
    @keyframes slideSquares {
      0% { transform: translateX(0); }
      100% { transform: translateX(100px); }
    }

Design 38 HTML

    <div class="abstract38">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 39 CSS Style

    .abstract39 {
      width: 200px;
      height: 200px;
      background-color: #34495e;
      position: relative;
      border-radius: 50%;
      overflow: hidden;
    }
    .abstract39::before, .abstract39::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #f39c12;
      border-radius: 50%;
      animation: floatDots 3s infinite ease-in-out;
    }
    .abstract39::before {
      top: 10%;
      left: 30%;
    }
    .abstract39::after {
      bottom: 10%;
      left: 60%;
    }
    @keyframes floatDots {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }

Design 39 HTML

    <div class="abstract39"></div>

Design 40 CSS Style

    .abstract40 {
      width: 300px;
      height: 150px;
      background: repeating-linear-gradient(90deg, #e74c3c, #e74c3c 10px, #9b59b6 10px, #9b59b6 20px);
      animation: moveStripes 3s infinite linear;
    }
    @keyframes moveStripes {
      0% { background-position: 0 0; }
      100% { background-position: 300px 0; }
    }

Design 40 HTML

    <div class="abstract40"></div>

Design 41 CSS Style

    .abstract41 {
      width: 250px;
      height: 250px;
      background: linear-gradient(45deg, #e74c3c, #9b59b6);
      border-radius: 50%;
      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
      animation: neonGlow 2s infinite alternate;
    }
    @keyframes neonGlow {
      0% { box-shadow: 0 0 15px 5px rgba(231, 76, 60, 0.8); }
      100% { box-shadow: 0 0 20px 10px rgba(155, 89, 182, 0.8); }
    }

Design 41 HTML

    <div class="abstract41"></div>

Design 42 CSS Style

    .abstract42 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: relative;
      background-color: #2ecc71;
      animation: pulseEffect 3s infinite ease-in-out;
    }
    @keyframes pulseEffect {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }

Design 42 HTML

    <div class="abstract42"></div>

Design 43 CSS Style

    .abstract43 {
      width: 250px;
      height: 250px;
      position: relative;
      background: conic-gradient(#e74c3c, #9b59b6, #3498db, #2ecc71);
      border-radius: 50%;
      animation: rotateKaleidoscope 5s infinite linear;
    }
    @keyframes rotateKaleidoscope {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 43 HTML

    <div class="abstract43"></div>

Design 44 CSS Style

    .abstract44 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #9b59b6;
    }
    .abstract44::before, .abstract44::after {
      content: '';
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: #f39c12;
      opacity: 0.8;
    }
    .abstract44::before {
      top: 0;
      left: 0;
      transform: rotate(45deg);
    }
    .abstract44::after {
      bottom: 0;
      right: 0;
      transform: rotate(-45deg);
    }

Design 44 HTML

    <div class="abstract44"></div>

Design 45 CSS Style

    .abstract45 {
      width: 100%;
      height: 200px;
      background: linear-gradient(45deg, #3498db, #9b59b6);
      position: relative;
      animation: waveMotion 6s infinite ease-in-out;
    }
    @keyframes waveMotion {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }

Design 45 HTML

    <div class="abstract45"></div>

Design 46 CSS Style

    .abstract46 {
      width: 200px;
      height: 200px;
      background-color: #f39c12;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }
    .abstract46::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 100%;
      background-color: #2ecc71;
      animation: splitCircle 4s infinite alternate;
    }
    @keyframes splitCircle {
      0% { left: 50%; }
      100% { left: 0%; }
    }

Design 46 HTML

    <div class="abstract46"></div>

Design 47 CSS Style

    .abstract47 {
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #e74c3c, #9b59b6);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      font-weight: bold;
      animation: rotateSquares 3s infinite ease-in-out;
    }
    @keyframes rotateSquares {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 47 HTML

    <div class="abstract47">47</div>

Design 48 CSS Style

    .abstract48 {
      width: 200px;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }
    .abstract48 div {
      width: 40px;
      height: 40px;
      background-color: #9b59b6;
      margin: 5px;
      border-radius: 15%;
      animation: floatHexagons 2s infinite ease-in-out;
    }
    .abstract48 div:nth-child(odd) {
      animation-delay: 0.5s;
    }
    @keyframes floatHexagons {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

Design 48 HTML

    <div class="abstract48">
      <div></div><div></div><div></div><div></div><div></div>
    </div>

Design 49 CSS Style

    .abstract49 {
      width: 300px;
      height: 300px;
      background: #34495e;
      position: relative;
      border-radius: 50%;
    }
    .abstract49::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, #e74c3c, transparent);
      animation: radialEffect 5s infinite linear;
      transform: translate(-50%, -50%);
    }
    @keyframes radialEffect {
      0% { transform: translate(-50%, -50%) scale(1); }
      100% { transform: translate(-50%, -50%) scale(1.5); }
    }

Design 49 HTML

    <div class="abstract49"></div>

Design 50 CSS Style

    .abstract50 {
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #f39c12, #2ecc71);
      position: relative;
      overflow: hidden;
    }
    .abstract50::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: #e74c3c;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: shiftTriangles 5s infinite ease-in-out;
    }
    @keyframes shiftTriangles {
      0% { top: 0; left: 50%; }
      50% { top: 50%; left: 0; }
      100% { top: 100%; left: 50%; }
    }

Design 50 HTML

    <div class="abstract50"></div>

Design 51 CSS Style

    .abstract51 {
      width: 200px;
      height: 200px;
      background: repeating-conic-gradient(#9b59b6 0% 20%, #2ecc71 20% 40%);
      border-radius: 50%;
      animation: spinSpiral 6s linear infinite;
    }
    @keyframes spinSpiral {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 51 HTML

    <div class="abstract51"></div>

Design 52 CSS Style

    .abstract52 {
      width: 200px;
      height: 200px;
      background: #34495e;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }
    .abstract52 div {
      width: 20px;
      height: 20px;
      background: #e74c3c;
      border-radius: 50%;
      position: absolute;
      animation: floatDots 4s infinite ease-in-out;
    }
    .abstract52 div:nth-child(1) { top: 10%; left: 20%; animation-delay: 0.2s; }
    .abstract52 div:nth-child(2) { top: 50%; left: 60%; animation-delay: 0.5s; }
    .abstract52 div:nth-child(3) { top: 80%; left: 30%; animation-delay: 0.8s; }
    @keyframes floatDots {
      0% { transform: scale(1); }
      50% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }

Design 52 HTML

    <div class="abstract52">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 53 CSS Style

    .abstract53 {
      width: 250px;
      height: 250px;
      background: linear-gradient(45deg, #e74c3c, #9b59b6);
      display: grid;
      place-items: center;
    }
    .abstract53 div {
      width: 70%;
      height: 70%;
      border: 3px solid white;
      transform: rotate(45deg);
      animation: pulseSquares 3s infinite ease-in-out;
    }
    @keyframes pulseSquares {
      0% { transform: scale(1) rotate(45deg); }
      50% { transform: scale(0.9) rotate(45deg); }
      100% { transform: scale(1) rotate(45deg); }
    }

Design 53 HTML

    <div class="abstract53">
      <div></div>
    </div>

Design 54 CSS Style

    .abstract54 {
      width: 300px;
      height: 300px;
      position: relative;
    }
    .abstract54 div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 10px;
      background-color: #f39c12;
      transform-origin: left;
      animation: rotateLines 3s infinite linear;
    }
    .abstract54 div:nth-child(1) { transform: rotate(0deg); }
    .abstract54 div:nth-child(2) { transform: rotate(45deg); }
    .abstract54 div:nth-child(3) { transform: rotate(90deg); }
    @keyframes rotateLines {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 54 HTML

    <div class="abstract54">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 55 CSS Style

    .abstract55 {
      width: 200px;
      height: 200px;
      position: relative;
      background: linear-gradient(45deg, #2ecc71, #e74c3c);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: cascadeTriangles 4s infinite alternate;
    }
    @keyframes cascadeTriangles {
      0% { transform: translateY(0); }
      100% { transform: translateY(20px) rotate(15deg); }
    }

Design 55 HTML

    <div class="abstract55"></div>

Design 57 CSS Style

    .abstract57 {
      width: 300px;
      height: 300px;
      position: relative;
    }
    .abstract57 div {
      width: 100px;
      height: 100px;
      background: #9b59b6;
      border-radius: 50%;
      position: absolute;
      opacity: 0.7;
      animation: overlapCircles 3s infinite alternate;
    }
    .abstract57 div:nth-child(1) { top: 0; left: 0; background: #e74c3c; }
    .abstract57 div:nth-child(2) { top: 50px; left: 50px; }
    .abstract57 div:nth-child(3) { top: 100px; left: 100px; background: #2ecc71; }
    @keyframes overlapCircles {
      0% { transform: scale(1); }
      100% { transform: scale(1.2); }
    }

Design 57 HTML

    <div class="abstract57">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 58 CSS Style

    .abstract58 {
      width: 300px;
      height: 150px;
      position: relative;
    }
    .abstract58 div {
      width: 50px;
      height: 50px;
      background: #e74c3c;
      position: absolute;
      animation: zigzagMotion 3s infinite ease-in-out;
    }
    .abstract58 div:nth-child(1) { top: 0; left: 0; }
    .abstract58 div:nth-child(2) { top: 50px; left: 50px; }
    .abstract58 div:nth-child(3) { top: 100px; left: 100px; }
    @keyframes zigzagMotion {
      0% { transform: translate(0, 0); }
      50% { transform: translate(20px, -20px); }
      100% { transform: translate(0, 0); }
    }

Design 58 HTML

    <div class="abstract58">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 59 CSS Style

    .abstract59 {
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #f39c12, #2ecc71);
      clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 25% 100%, 0% 25%);
      animation: expandHexagons 4s infinite alternate;
    }
    @keyframes expandHexagons {
      0% { transform: scale(1); }
      100% { transform: scale(1.5); }
    }

Design 59 HTML

    <div class="abstract59"></div>

Design 60 CSS Style

    .abstract60 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: #2c3e50;
    }
    .abstract60 div {
      width: 20px;
      height: 20px;
      background: #f39c12;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      position: absolute;
      animation: floatStars 3s infinite ease-in-out;
    }
    .abstract60 div:nth-child(1) { top: 50%; left: 50%; }
    .abstract60 div:nth-child(2) { top: 20%; left: 80%; }
    .abstract60 div:nth-child(3) { top: 80%; left: 20%; }
    @keyframes floatStars {
      0% { transform: translate(0, 0); }
      50% { transform: translate(10px, -10px); }
      100% { transform: translate(0, 0); }
    }

Design 60 HTML

    <div class="abstract60">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 61 CSS Style

    .abstract61 {
      display: grid;
      grid-template-columns: repeat(3, 80px);
      gap: 15px;
    }
    .abstract61 div {
      width: 70px;
      height: 70px;
      background: radial-gradient(circle, #2ecc71, #16a085);
      border-radius: 50%;
      animation: pulseGrid 2s infinite alternate;
    }
    .abstract61 div:nth-child(even) {
      animation-delay: 0.5s;
    }
    @keyframes pulseGrid {
      0% { transform: scale(1); }
      100% { transform: scale(1.3); }
    }

Design 61 HTML

    <div class="abstract61">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 63 CSS Style

    .abstract63 {
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, #f39c12, transparent);
      border-radius: 50%;
      position: relative;
      animation: starburstExpand 3s infinite alternate;
    }
    @keyframes starburstExpand {
      0% { transform: scale(1); }
      100% { transform: scale(1.5); }
    }

Design 63 HTML

    <div class="abstract63"></div>

Design 64 CSS Style

    .abstract64 {
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #3498db, #e74c3c);
      animation: rotateBox 4s infinite linear;
    }
    @keyframes rotateBox {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 64 HTML

    <div class="abstract64"></div>

Design 65 CSS Style

    .abstract65 {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 220px;
    }
    .abstract65 div {
      width: 60px;
      height: 60px;
      background: linear-gradient(to bottom right, #2ecc71, #16a085);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

Design 65 HTML

    <div class="abstract65">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 66 CSS Style

    .abstract66 {
      position: relative;
      width: 300px;
      height: 150px;
      background: #34495e;
    }
    .abstract66 div {
      width: 30px;
      height: 30px;
      background: #f39c12;
      border-radius: 50%;
      position: absolute;
      animation: bounceBall 2s infinite ease-in-out;
    }
    .abstract66 div:nth-child(1) { top: 0; left: 30px; }
    .abstract66 div:nth-child(2) { top: 0; left: 130px; animation-delay: 0.5s; }
    .abstract66 div:nth-child(3) { top: 0; left: 240px; animation-delay: 1s; }
    @keyframes bounceBall {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(120px); }
    }

Design 66 HTML

    <div class="abstract66">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 67 CSS Style

    .abstract67 {
      width: 75%;
      height: 200px;
      position: absolute;
      background: repeating-linear-gradient(90deg, #3498db, #3498db 20px, #16a085 20px, #16a085 40px);
      animation: waveScroll 50s linear infinite;
    }
    @keyframes waveScroll {
      0% { background-position: 0; }
      100% { background-position: 200px; }
    }

Design 67 HTML

    <div class="abstract67"></div>

Design 68 CSS Style

    .abstract68 {
      position: relative;
      width: 300px;
      height: 150px;
      background: #16a085;
    }
    .abstract68 div {
      position: absolute;
      width: 80px;
      height: 80px;
      background: #9b59b6;
      border-radius: 50%;
      opacity: 0.7;
      animation: moveLayer 3s infinite ease-in-out;
    }
    .abstract68 div:nth-child(1) { top: 0; left: 0; }
    .abstract68 div:nth-child(2) { top: 50px; left: 100px; }
    .abstract68 div:nth-child(3) { top: 0; left: 200px; }
    @keyframes moveLayer {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(20px, -20px); }
    }

Design 68 HTML

    <div class="abstract68">
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 69 CSS Style

    .abstract69 {
      width: 300px;
      height: 300px;
      position: relative;
    }
    .abstract69 div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      background: rgba(231, 76, 60, 0.5);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: expandCircles 3s infinite alternate;
    }
    .abstract69 div:nth-child(2) {
      animation-delay: 0.5s;
      background: rgba(41, 128, 185, 0.5);
    }
    @keyframes expandCircles {
      0% { transform: translate(-50%, -50%) scale(1); }
      100% { transform: translate(-50%, -50%) scale(3); }
    }

Design 69 HTML

    <div class="abstract69">
      <div></div>
      <div></div>
    </div>

Design 71 CSS Style

    .abstract71 {
      width: 300px;
      height: 150px;
      position: relative;
      background: linear-gradient(to right, #e74c3c, #f39c12, #2ecc71);
      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path fill="none" stroke="black" stroke-width="20" d="M0,75 Q75,150 150,75 T300,75"></path></svg>');
      mask-size: 300% 300%;
      animation: waveAnimation 3s linear infinite;
    }
    @keyframes waveAnimation {
      0% { mask-position: 0% 0%; }
      50% { mask-position: 150% 0% }
      100% { mask-position: 300% 0%; }
    }

Design 71 HTML

    <div class="abstract71"></div>

Design 72 CSS Style

    .abstract72 {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      width: 150px;
    }
    .abstract72 div {
      width: 30px;
      height: 30px;
      background: radial-gradient(circle, #8e44ad, #3498db);
      border-radius: 50%;
      animation: glowAnimation 2s infinite alternate;
    }
    .abstract72 div:nth-child(even) {
      animation-delay: 0.5s;
    }
    @keyframes glowAnimation {
      0% { box-shadow: 0 0 10px #9b59b6; }
      100% { box-shadow: 0 0 20px #3498db; }
    }

Design 72 HTML

    <div class="abstract72">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 73 CSS Style

    .abstract73 {
      width: 150px;
      height: 150px;
      position: relative;
      transform: rotate(0deg);
      background: linear-gradient(to bottom right, #1abc9c, #2ecc71);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: triangleSpin 3s infinite linear;
    }
    @keyframes triangleSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 73 HTML

    <div class="abstract73"></div>

Design 74 CSS Style

    .abstract74 {
      width: 200px;
      height: 200px;
      background: linear-gradient(45deg, #e74c3c, #8e44ad);
      clip-path: circle(50% at 50% 50%);
      animation: morphBlob 4s infinite alternate;
    }
    @keyframes morphBlob {
      0% { clip-path: circle(50% at 50% 50%); }
      100% { clip-path: ellipse(70% 40% at 50% 50%); }
    }

Design 74 HTML

    <div class="abstract74"></div>

Design 75 CSS Style

    .abstract75 {
      width: 200px;
      height: 200px;
      background: repeating-linear-gradient(45deg, #3498db, #3498db 10px, #2ecc71 10px, #2ecc71 20px);
      animation: rotateSquares75 3s infinite linear;
    }
    @keyframes rotateSquares75 {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 75 HTML

    <div class="abstract75"></div>

Design 76 CSS Style

    .abstract76 {
      width: 250px;
      height: 250px;
      position: relative;
      background: conic-gradient(#e74c3c, #f39c12, #8e44ad, #3498db, #e74c3c);
      border-radius: 50%;
      animation: spinRing 4s infinite linear;
    }
    @keyframes spinRing {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

Design 76 HTML

    <div class="abstract76"></div>

Design 77 CSS Style

    .abstract77 {
      font-size: 2em;
      font-weight: bold;
      color: #f39c12;
      position: relative;
      animation: bounceText 2s infinite alternate ease-in-out;
    }
    @keyframes bounceText {
      0% { transform: translateY(0); }
      100% { transform: translateY(-20px); }
    }

Design 77 HTML

    <div class="abstract77">Bouncing Text</div>

Design 78 CSS Style

    .abstract78 {
      display: grid;
      grid-template-columns: repeat(5, 40px);
      grid-template-rows: repeat(5, 40px);
      gap: 5px;
    }
    .abstract78 div {
      width: 40px;
      height: 40px;
      background: #9b59b6;
      animation: fadeGrid 3s infinite alternate;
    }
    .abstract78 div:nth-child(even) {
      animation-delay: 0.5s;
    }
    @keyframes fadeGrid {
      0% { opacity: 1; }
      100% { opacity: 0.2; }
    }

Design 78 HTML

    <div class="abstract78">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Design 79 CSS Style

    .abstract79 {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      width: 220px;
    }
    .abstract79 div {
      width: 50px;
      height: 50px;
      background: linear-gradient(45deg, #1abc9c, #e67e22);
      animation: floatSquares 3s infinite ease-in-out alternate;
    }
    @keyframes floatSquares {
      0% { transform: translateY(0); }
      100% { transform: translateY(-20px); }
    }

Design 79 HTML

    <div class="abstract79">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Abstract Design HTML CSS

Note: Long press to select all and copy the code ❤️

Design 1 CSS Style

Design 1 HTML

Design 2 CSS Style

Design 2 HTML

Design 3 CSS Style

Design 3 HTML

Design 4 CSS Style

Design 4 HTML

Design 5 CSS Style

Design 5 HTML

Design 6 CSS Style

Design 6 HTML

Design 7 CSS Style

Design 7 HTML

Design 8 CSS Style

Design 8 HTML

Design 9 CSS Style

Design 9 HTML

Design 10 CSS Style

Design 10 HTML

Design 11 CSS Style

Design 11 HTML

Design 12 CSS Style

Design 12 HTML

Design 13 CSS Style

Design 13 HTML

Design 14 CSS Style

Design 14 HTML

Design 15 CSS Style

Design 15 HTML

Design 16 CSS Style

Design 16 HTML

Design 17 CSS Style

Design 17 HTML

Design 18 CSS Style

Design 18 HTML

Design 19 CSS Style

Design 19 HTML

Design 20 CSS Style

Design 20 HTML

Design 21 CSS Style

Design 21 HTML

Design 22 CSS Style

Design 22 HTML

Design 23 CSS Style

Design 23 HTML

Design 24 CSS Style

Design 24 HTML

Design 25 CSS Style

Design 25 HTML

Design 26 CSS Style

Design 26 HTML

Design 27 CSS Style

Design 27 HTML

Design 28 CSS Style

Design 28 HTML

Design 29 CSS Style

Design 29 HTML

Design 30 CSS Style

Design 30 HTML

Design 31 CSS Style

Design 31 HTML

Design 32 CSS Style

Design 32 HTML

Design 33 CSS Style

Design 33 HTML

Design 34 CSS Style

Design 34 HTML

Design 35 CSS Style

Design 35 HTML

Design 36 CSS Style

Design 36 HTML

Design 37 CSS Style

Design 37 HTML

Design 38 CSS Style

Design 38 HTML

Design 39 CSS Style

Design 39 HTML