Overdesigned Card

rohitwushu
Jan 12, 2026 6
Live Preview

Live Editor

<figure>

  <h1>
    Overdesigned<br> <strong>Card</strong>
  </h1>

  <figcaption>

    <p>
      500 lines of CSS for one card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>

  </figcaption>

  <button class="button" type="button">
    <em>Keep Reading On</em>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <path d="M12.17 9.53c2.307-2.592 3.278-4.684 3.641-6.218.21-.887.214-1.58.16-2.065a3.6 3.6 0 0 0-.108-.563 2 2 0 0 0-.078-.23V.453c-.073-.164-.168-.234-.352-.295a2 2 0 0 0-.16-.045 4 4 0 0 0-.57-.093c-.49-.044-1.19-.03-2.08.188-1.536.374-3.618 1.343-6.161 3.604l-2.4.238h-.006a2.55 2.55 0 0 0-1.524.734L.15 7.17a.512.512 0 0 0 .433.868l1.896-.271c.28-.04.592.013.955.132.232.076.437.16.655.248l.203.083c.196.816.66 1.58 1.275 2.195.613.614 1.376 1.08 2.191 1.277l.082.202c.089.218.173.424.249.657.118.363.172.676.132.956l-.271 1.9a.512.512 0 0 0 .867.433l2.382-2.386c.41-.41.668-.949.732-1.526zm.11-3.699c-.797.8-1.93.961-2.528.362-.598-.6-.436-1.733.361-2.532.798-.799 1.93-.96 2.528-.361s.437 1.732-.36 2.531Z"></path>
      <path d="M5.205 10.787a7.6 7.6 0 0 0 1.804 1.352c-1.118 1.007-4.929 2.028-5.054 1.903-.126-.127.737-4.189 1.839-5.18.346.69.837 1.35 1.411 1.925"></path>
    </svg>
  </button>

  <svg viewBox="0 0 400 432" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <g id="Mask group">
      <mask id="mask0_562_29" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="400" height="432">
        <rect id="Rectangle 123" width="400" height="432" fill="#333333"></rect>
      </mask>
      <g mask="url(#mask0_562_29)">
        <g id="Group 15">
          <path id="Ellipse 53" d="M540.743 304.682C545 295.965 544.095 285.16 538.673 273.015C533.253 260.872 523.346 247.459 509.731 233.597C482.504 205.875 440.525 176.442 390.245 151.887C339.964 127.332 290.941 112.324 252.338 107.897C233.035 105.683 216.365 106.118 203.456 109.309C190.544 112.501 181.466 118.43 177.209 127.147C172.952 135.864 173.858 146.668 179.28 158.814C184.7 170.956 194.607 184.371 208.222 198.233C235.449 225.954 277.428 255.387 327.708 279.941C377.989 304.496 427.012 319.505 465.615 323.933C484.918 326.147 501.588 325.711 514.497 322.519C527.409 319.327 536.486 313.399 540.743 304.682Z" stroke="#FFF47C" class="id_anim_stroke-property1" data-duration="4.939398595856296" data-offset="0" style="stroke-dashoffset: 909.331px; stroke-dasharray: 506.742px, 402.589px; animation: 4.9394s linear 0s infinite normal forwards running id_anim_stroke-property1;"></path>
          <path id="Ellipse 54" d="M504.933 356.609C511.626 349.663 514.044 339.133 512.572 325.926C511.101 312.723 505.747 296.921 497.002 279.541C479.514 244.787 448.511 203.828 408.131 164.919C367.752 126.011 325.67 96.5501 290.291 80.3633C272.599 72.2689 256.609 67.5059 243.36 66.5255C230.108 65.5448 219.675 68.3514 212.982 75.2978C206.288 82.2442 203.871 92.774 205.343 105.981C206.814 119.184 212.167 134.986 220.912 152.366C238.401 187.12 269.403 228.079 309.783 266.987C350.163 305.896 392.245 335.357 427.624 351.544C445.316 359.638 461.306 364.401 474.554 365.381C487.807 366.362 498.24 363.555 504.933 356.609Z" stroke="#FEA298" class="id_anim_stroke-property2" data-duration="4.458956602288203" data-offset="0" style="stroke-dashoffset: 910.096px; stroke-dasharray: 188.647px, 721.449px; animation: 4.45896s linear 0s infinite normal forwards running id_anim_stroke-property2;"></path>
          <path id="Ellipse 55" d="M460.589 391.35C468.935 386.514 474.157 377.056 476.377 363.954C478.595 350.856 477.798 334.19 474.173 315.076C466.924 276.85 448.39 228.941 420.277 180.423C392.164 131.904 359.815 92.0001 330.256 66.702C315.475 54.0515 301.413 45.072 288.946 40.4835C276.475 35.8936 265.672 35.7207 257.326 40.5569C248.979 45.3932 243.758 54.8512 241.538 67.9531C239.319 81.0513 240.117 97.7166 243.742 116.832C250.991 155.057 269.524 202.966 297.637 251.485C325.751 300.003 358.1 339.907 387.659 365.205C402.44 377.856 416.502 386.835 428.969 391.424C441.44 396.013 452.242 396.186 460.589 391.35Z" stroke="#24C7AF" class="id_anim_stroke-property3" data-duration="5.124449304356757" data-offset="0" style="stroke-dashoffset: 910.096px; stroke-dasharray: 184.98px, 725.116px; animation: 5.12445s linear 0s infinite normal forwards running id_anim_stroke-property3;"></path>
          <path id="Ellipse 56" d="M404.38 413.513C413.781 411.351 421.559 403.853 427.541 391.987C433.522 380.124 437.671 363.964 439.841 344.63C444.18 305.966 440.59 254.723 428.025 200.074C415.461 145.425 396.309 97.7589 375.519 64.8726C365.123 48.4276 354.332 35.7025 343.771 27.6434C333.207 19.5819 322.936 16.2329 313.535 18.3944C304.134 20.5559 296.356 28.0548 290.374 39.9206C284.393 51.7829 280.243 67.9431 278.074 87.2773C273.735 125.941 277.324 177.185 289.889 231.834C302.454 286.483 321.605 334.149 342.395 367.035C352.791 383.48 363.582 396.205 374.143 404.264C384.707 412.325 394.979 415.675 404.38 413.513Z" stroke="#F50D6D" class="id_anim_stroke-property4" data-duration="4.821864812014004" data-offset="0" style="stroke-dashoffset: 910.096px; stroke-dasharray: 66.4889px, 843.607px; animation: 4.82186s linear 0s infinite normal forwards running id_anim_stroke-property4;"></path>
          <path id="Ellipse 57" d="M340.725 417.846C350.332 418.714 360.055 414.004 369.43 404.585C378.801 395.169 387.768 381.099 395.84 363.397C411.981 327.997 424.497 278.176 429.54 222.328C434.584 166.48 431.196 115.223 421.658 77.5037C416.888 58.6419 410.587 43.193 403.054 32.2506C395.519 21.3048 386.797 14.9291 377.19 14.0615C367.583 13.1939 357.86 17.9039 348.485 27.3225C339.114 36.7384 330.147 50.8084 322.075 68.5106C305.933 103.911 293.418 153.732 288.375 209.58C283.331 265.427 286.718 316.685 296.257 354.404C301.026 373.266 307.328 388.714 314.861 399.657C322.396 410.603 331.118 416.978 340.725 417.846Z" stroke="#8FB4BD" class="id_anim_stroke-property5" data-duration="4.857302978376134" data-offset="0" style="stroke-dashoffset: 910.096px; stroke-dasharray: 26.2808px, 883.815px; animation: 4.8573s linear 0s infinite normal forwards running id_anim_stroke-property5;"></path>
          <path id="Ellipse 58" d="M291.208 407.011C300.3 410.235 310.888 408.084 322.306 401.286C333.72 394.489 345.897 383.084 358.108 367.937C382.528 337.648 407.012 292.49 425.753 239.639C444.493 186.789 453.928 136.293 454.046 97.3869C454.104 77.9314 451.833 61.4023 447.25 48.9331C442.666 36.4602 435.798 28.12 426.707 24.896C417.615 21.6721 407.027 23.8228 395.61 30.6213C384.195 37.4179 372.018 48.8235 359.807 63.9698C335.388 94.2587 310.903 139.418 292.163 192.268C273.422 245.119 263.987 295.614 263.87 334.52C263.811 353.976 266.082 370.505 270.665 382.974C275.249 395.447 282.117 403.787 291.208 407.011Z" stroke="#99FFA2" class="id_anim_stroke-property6" data-duration="4.748450198676437" data-offset="0" style="stroke-dashoffset: 910.096px; stroke-dasharray: 57.7526px, 852.344px; animation: 4.74845s linear 0s infinite normal forwards running id_anim_stroke-property6;"></path>
        </g>
      </g>
    </g>
  </svg>

</figure>
@charset "UTF-8";

*:not(head, head *, style, script, svg, svg *),
*:not(head, head *, style, script, svg, svg *)::before,
*:not(head, head *, style, script, svg, svg *)::after {
  all: unset;
  appearance: none;
  box-sizing: border-box;
}

body,
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #555 black;
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  background-color: black;
  font: normal normal 400 16px / 150% "Trebuchet MS", sans-serif;
  color: #bbb;
}

@media (min-height: 380px) {
  body {
    justify-content: center;
  }
}

figure {
  position: relative;
  width: clamp(280px, 70vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 25px 30px 25px;
  border: 1px solid #333;
  background-image: linear-gradient(
    135deg,
    #111111 25%,
    #222222 25%,
    #222222 50%,
    #111111 50%,
    #111111 75%,
    #222222 75%,
    #222222
  );
  background-size: 20px 20px;
  animation: move 4s linear infinite;
  gap: 30px;
  margin: 30px 0;
  border-radius: 25px;
  z-index: 1;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

figure::before {
  position: absolute;
  top: -14px;
  right: -14px;
  width: clamp(30px, 7vw, 50px);
  height: clamp(30px, 7vw, 50px);
  background-color: #ffa399;
  background-image: radial-gradient(
      at 91% 47%,
      hsla(169, 65%, 66%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 14% 82%, hsla(98, 89%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 61% 78%, hsla(98, 91%, 69%, 1) 0px, transparent 50%),
    radial-gradient(at 85% 75%, hsla(303, 82%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 24% 72%, hsla(105, 90%, 71%, 1) 0px, transparent 50%),
    radial-gradient(at 59% 40%, hsla(125, 93%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 37% 66%, hsla(119, 60%, 79%, 1) 0px, transparent 50%);
  border-radius: 5px;
  outline: 1px solid #df9bff88;
  outline-offset: 7px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -4px 4px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -6px 5px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -15px 8px 0px inset, rgba(0, 0, 0, 0.06) 0px 1px 1px,
    rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px;
  z-index: 1;
  pointer-events: none;
  content: "";
}

figure::after {
  position: absolute;
  width: calc(100% + 26px);
  height: calc(100% + 26px);
  top: -13px;
  left: -13px;
  border-image-source: linear-gradient(
    315deg,
    #fda298,
    #ff95b0,
    #ff8ece,
    #f68fed,
    #dd9bff,
    #b6afff,
    #79c8ff,
    #00e0ff,
    #00f4ec,
    #00fdbf,
    #00fa8d,
    #92eb5a
  );
  border-image-width: 4px;
  border-image-outset: 0;
  border-image-repeat: space;
  border-image-slice: 5;
  opacity: 0.3;
  z-index: -1;
  content: "";
}

figure h1 {
  position: relative;
  font-size: clamp(220%, 8vw, 280%);
  line-height: 110%;
  font-weight: 700;
  margin-bottom: -15px;
  color: white;
  z-index: 1;
  align-self: flex-start;
}

figure h1::after {
  position: absolute;
  width: calc(100% + 8px);
  top: clamp(20px, 5vw, 30px);
  left: -4px;
  height: 20px;
  background-color: #444;
  border-radius: 3px;
  z-index: -1;
  content: "";
}

figure h1 strong {
  font-size: 193%;
  -webkit-text-fill-color: transparent;
  background-color: #99ffa2;
  background-image: radial-gradient(
      at 80% 25%,
      hsla(159, 100%, 50%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 76% 87%, hsla(333, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 46% 28%, hsla(23, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 71% 50%, hsla(224, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 77% 97%, hsla(356, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 63% 6%, hsla(204, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 34% 8%, hsla(268, 100%, 50%, 1) 0px, transparent 50%);
  background-clip: text;
  webkit-background-clip: text;
}

figure figcaption {
  position: relative;
  width: calc(100% - 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: repeating-radial-gradient(circle, #333, #333 3px, #000000aa 6px);
  background-size: 35px 35px;
  background-position: center;
  padding: 20px;
}

figure figcaption::before {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  background-color: #99cfff;
  background-image: radial-gradient(
      at 90% 17%,
      hsla(13, 100%, 50%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 10% 42%, hsla(25, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 54% 69%, hsla(276, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 11% 71%, hsla(76, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 56% 61%, hsla(87, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 82% 43%, hsla(286, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 1% 66%, hsla(160, 100%, 50%, 1) 0px, transparent 50%);
  mix-blend-mode: hard-light;
  z-index: -2;
  content: "";
}

figure figcaption::after {
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-color: #ff99c5;
  background-image: radial-gradient(
      at 22% 5%,
      hsla(138, 100%, 50%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 98% 70%, hsla(126, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 66% 74%, hsla(213, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 27% 65%, hsla(136, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 66% 39%, hsla(227, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 48%, hsla(51, 100%, 50%, 1) 0px, transparent 50%),
    radial-gradient(at 77% 91%, hsla(5, 100%, 50%, 1) 0px, transparent 50%);
  border-radius: 20px;
  z-index: -1;
  content: "";
}

figure figcaption p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: 20px;
  border-left: 1px solid white;
}

@media (max-height: 500px) {
  figure figcaption p {
    -webkit-line-clamp: 3;
  }
}

@media (max-height: 470px) {
  figure figcaption p {
    -webkit-line-clamp: 2;
  }
}

@media (max-height: 440px) {
  figure figcaption p {
    -webkit-line-clamp: 1;
  }
}

figure .button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;
  padding: 10px 20px;
  border-radius: 9999px;
  background-color: hsla(1, 100%, 80%, 1);
  background-image: radial-gradient(
      at 35% 81%,
      hsla(314, 99%, 74%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 0% 13%,
      hsla(106, 77%, 72%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 31% 76%,
      hsla(111, 79%, 67%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 26% 18%,
      hsla(104, 83%, 70%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 8% 48%,
      hsla(126, 98%, 79%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 63% 15%,
      hsla(132, 98%, 61%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 46% 5%,
      hsla(193, 76%, 78%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    );
  filter: saturate(1.3) contrast(1.1);
  border: 2px groove hsla(0, 0%, 100%, 0.493);
  box-shadow: 0px 6px 0px black;
  cursor: pointer;
  align-self: flex-start;
  overflow: hidden;
  transition: all 0.6s ease;
  z-index: 1;
}

figure .button:hover {
  padding: 10px 30px;
  transition: all 0.6s ease;
}

figure .button::after {
  position: absolute;
  bottom: 155%;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  background-color: hsla(103, 100%, 80%, 1);
  background-image: radial-gradient(
      at 36% 14%,
      hsla(116, 71%, 63%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 76% 81%,
      hsla(358, 89%, 65%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 26% 47%,
      hsla(232, 75%, 62%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 16% 3%,
      hsla(153, 80%, 76%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 39% 51%,
      hsla(63, 74%, 67%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 56% 42%,
      hsla(301, 92%, 64%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    ),
    radial-gradient(
      at 34% 17%,
      hsla(304, 74%, 63%, 1) 0px,
      hsla(0, 0%, 0%, 0) 50%
    );
  filter: blur(15px) saturate(2) contrast(2);
  border-radius: 9999px;
  mix-blend-mode: overlay;
  content: "";
  z-index: -1;
  transition: all 0.6s ease;
}

figure .button:hover::after {
  bottom: -50px;
  transition: all 0.6s ease;
}

figure .button:active {
  box-shadow: 0px 0px 0px hsla(192, 18%, 39%, 1);
  transform: translateY(5px);
  transition: all 0.2s ease;
}

figure .button em {
  font-size: clamp(90%, 3vw, 110%);
  line-height: 150%;
  font-weight: 600;
  color: hsla(0, 0%, 100%, 1);
  font-style: normal;
  text-shadow: 0px 0px 6px hsla(0, 0%, 0%, 0.843), 0px 0px 12px rgb(0, 225, 255),
    0px 0px 18px hsla(300, 100%, 50%, 1), 0px 0px 24px hsla(123, 100%, 50%, 1),
    0px 0px 30px rgb(0, 255, 200);
}

figure .button svg {
  width: 20px;
  height: auto;
  fill: rgb(110, 118, 151);
  margin-left: 10px;
  transition: all 1s ease;
}

figure .button:hover svg {
  fill: hsla(358, 89%, 65%, 1);
  transform: rotateZ(360deg);
  margin-left: 20px;
  transition: all 1s ease;
}

figure > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: color-dodge;
  opacity: 0.7;
  z-index: -1;
}

@keyframes id_anim_stroke-property1 {
  0% {
    stroke-dashoffset: 909.3309936523438px;
    stroke-dasharray: 506.7418513013202px, 402.58914235102355px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 506.7418513013202px, 402.58914235102355px;
  }
}

@keyframes id_anim_stroke-property2 {
  0% {
    stroke-dashoffset: 910.0960083007812px;
    stroke-dasharray: 188.64717101644734px, 721.4488372843339px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 188.64717101644734px, 721.4488372843339px;
  }
}

@keyframes id_anim_stroke-property3 {
  0% {
    stroke-dashoffset: 910.0961303710938px;
    stroke-dasharray: 184.97990790899502px, 725.1162224620988px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 184.97990790899502px, 725.1162224620988px;
  }
}

@keyframes id_anim_stroke-property4 {
  0% {
    stroke-dashoffset: 910.0956420898438px;
    stroke-dasharray: 66.48893618081152px, 843.6067059090323px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 66.48893618081152px, 843.6067059090323px;
  }
}

@keyframes id_anim_stroke-property5 {
  0% {
    stroke-dashoffset: 910.0958251953125px;
    stroke-dasharray: 26.280772178171453px, 883.815053017141px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 26.280772178171453px, 883.815053017141px;
  }
}

@keyframes id_anim_stroke-property6 {
  0% {
    stroke-dashoffset: 910.0961303710938px;
    stroke-dasharray: 57.75255483028191px, 852.3435755408119px;
  }

  100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 57.75255483028191px, 852.3435755408119px;
  }
}
Categories

Overdesigned Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
