Additional Gradients


Topic: Additional Gradients

steveweller pro asked 6 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 6 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

Damian Gemza staff answered 6 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

steveweller pro answered 6 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
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
  • User: 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