Просмотр файла

Gradient Animation

---

Gradient Animation …. Стандартная тема с градиентным фоном

и Blur эффект

---

• Submitter
  Silence
• Submitted
  22.10.2024
• Category
  Themes and design for IC5

This gradient animation looks great I can’t wait to see what else you cook!

Paste in Custom .css

/* Custom Gradient Animation CSS with more colors */

body {

background: linear-gradient(-45deg,

#d4af37, /* Dorado */

#c0c0c0, /* Plateado */

#ff00ff, /* Fucsia */

#87ceeb, /* Celeste */

#40e0d0, /* Turquesa */

#f4c542, /* Amarillo metálico */

#b0c4de, /* Lavanda claro */

#ff69b4, /* Rosa brillante */

#4682b4, /* Azul acero */

#ff6347, /* Rojo tomate */

#dda0dd, /* Orquídea */

#1e90ff, /* Azul dodger */

#20b2aa, /* Aguamarina oscuro */

#ff1493, /* Rosa profundo */

#98fb98, /* Verde pálido */

#ff4500, /* Naranja rojo */

#00ced1, /* Cian oscuro */

#9932cc, /* Púrpura oscuro */

#ffd700, /* Oro */

#8a2be2, /* Azul violeta */

#7fffd4, /* Aguamarina */

#ffdead, /* Oro claro */

#8b0000, /* Rojo oscuro */

#f08080 /* Coral claro */

);

background-size: 400% 400%;

animation: gradient 15s ease infinite;

height: 100vh;

}

.ipsHeader__primary {

background: linear-gradient(-45deg,

#d4af37, #c0c0c0, #ff00ff, #87ceeb, #40e0d0, #f4c542, #b0c4de, #ff69b4,

#4682b4, #ff6347, #dda0dd, #1e90ff, #20b2aa, #ff1493, #98fb98, #ff4500,

#00ced1, #9932cc, #ffd700, #8a2be2, #7fffd4, #ffdead, #8b0000, #f08080);

background-size: 400% 400%;

animation: gradient 15s ease infinite;

}

@keyframes gradient {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

.ipsHeader__secondary {

-webkit-backdrop-filter: blur(20px);

backdrop-filter: blur(20px);

background: rgb(0 0 0 / 28%);

box-shadow: 0 15px 25px rgba(0, 0, 0, .6);

}

.ipsFooter {

-webkit-backdrop-filter: blur(20px);

backdrop-filter: blur(20px);

background: rgb(0 0 0 / 28%);

box-shadow: 0 15px 25px rgba(0, 0, 0, .6);

}

li.ipsBox.ipsPull {

-webkit-backdrop-filter: blur(20px);

backdrop-filter: blur(20px);

background: rgb(251 250 250 / 80%);

}

.ipsBox__header {

border-bottom: 1px solid #0000001f;

background: transparent;

}

.ipsData__item {

outline: transparent;

}

.ipsWidget {

-webkit-backdrop-filter: blur(20px);

backdrop-filter: blur(20px);

background: rgb(251 250 250 / 80%);

}

.ipsBox {

-webkit-backdrop-filter: blur(20px);

backdrop-filter: blur(20px);

background: rgb(251 250 250 / 80%);

}

header.ipsWidget__header {

border-bottom: 1px solid #0000001f;

background: transpa

rent;

}

.ipsWidget__header {

border-bottom: 1px solid #0000001f;

background: transparent;

}

Hello,

Thank you for this!

However, I can't figure out how to make it look like your screenshot.. I added the code in CSS, and I got something like a rainbow

How can I make it just one radiant like in the video?