Topic: Additional Gradients

steveweller pro asked 5 years ago


Hi I'm trying to use the gradients specified here: https://mdbootstrap.com/angular/css/gradient/#additional but none of the additional gradients seem to work (just the basic ones like '
blue-gradient'. Any idea what I'm missing?

Thanks,

Steve

Damian Gemza staff answered 5 years ago


Dear Steve, Below you can find the gradient classes. Just copy and paste it into your styles.scss stylesheet and use those classes on any of your elements.
.juicy-peach-gradient {
background-image: linear-gradient(to right, #ffecd20%, #fcb69f100%);

}

.young-passion-gradient {

background-image: linear-gradient(to right, #ff81770%, #ff867a0%, #ff8c7f21%, #f9918552%, #cf556c78%, #b12a5b100%);

}

.lady-lips-gradient {

background-image: linear-gradient(to top, #ff9a9e0%, #fecfef99%, #fecfef100%);

}

.sunny-morning-gradient {

background-image: linear-gradient(120deg, #f6d3650%, #fda085100%);

}

.rainy-ashville-gradient {

background-image: linear-gradient(to top, #fbc2eb0%, #a6c1ee100%);

}

.frozen-dreams-gradient {

background-image: linear-gradient(to top, #fdcbf10%, #fdcbf11%, #e6dee9100%);

}

.warm-flame-gradient {

background-image: linear-gradient(45deg, #ff9a9e0%, #fad0c499%, #fad0c4100%);

}

.night-fade-gradient {

background-image: linear-gradient(to top, #a18cd10%, #fbc2eb100%);

}

.spring-warmth-gradient {

background-image: linear-gradient(to top, #fad0c40%, #ffd1ff100%);

}

.winter-neva-gradient {

background-image: linear-gradient(120deg, #a1c4fd0%, #c2e9fb100%);

}

.dusty-grass-gradient {

background-image: linear-gradient(120deg, #d4fc790%, #96e6a1100%);

}

.tempting-azure-gradient {

background-image: linear-gradient(120deg, #84fab00%, #8fd3f4100%);

}

.heavy-rain-gradient {

background-image: linear-gradient(to top, #cfd9df0%, #e2ebf0100%);

}

.amy-crisp-gradient {

background-image: linear-gradient(120deg, #a6c0fe0%, #f68084100%);

}

.mean-fruit-gradient {

background-image: linear-gradient(120deg, #fccb900%, #d57eeb100%);

}

.deep-blue-gradient {

background-image: linear-gradient(120deg, #e0c3fc0%, #8ec5fc100%);

}

.ripe-malinka-gradient {

background-image: linear-gradient(120deg, #f093fb0%, #f5576c100%);

}

.cloudy-knoxville-gradient {

background-image: linear-gradient(120deg, #fdfbfb0%, #ebedee100%);

}

.morpheus-den-gradient {

background-image: linear-gradient(to top, #30cfd00%, #330867100%);

}

.rare-wind-gradient {

background-image: linear-gradient(to top, #a8edea0%, #fed6e3100%);

}

.near-moon-gradient {

background-image: linear-gradient(to top, #5ee7df0%, #b490ca100%);

}
Best Regards, Damian

steveweller pro answered 5 years ago


Hi, The example doesn't define any of the circles in the html and the scss doesn't seem to define any of the example gradients, just defines how to create a gradient. Still confused!   Regards,   Steve

Damian Gemza staff answered 5 years ago


Dear steveweller, Please check if you have copied the scss code which is necessary for those additional gradients. Below the gradient circles you'll find the code which is necessary for those gradients. Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Laptop
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No