Use of additional gradients

Bernat asked 2 months ago


I am a pro user having a problem with access additional gradients. For now I can only use the basic set. How to call the additional classes to be able to see it in the action?




Do you mean these gradients: - "additional" section? Everything is explained in the documentation.



lede commented 2 months ago

The additional gradients don't seem to be in the 4.5.6 stylesheet

They aren't in the MDB package, they're part of the extended documentation. I explain to you how it works.
An example with "Juicy Peach Gradient":
1. Paste this code to your CSS file or within <style></style> tags:

.juicy-peach-gradient { background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); }

2. Add this class to the component like here:

<!-- Grid row -->
<div class="row text-center">

<!-- Grid column -->
<div class="col-md-4 mb-4">
<div class="color-block mx-auto mt-3 warm-flame-gradient z-depth-2"></div>
<!-- Grid column -->

<!-- Grid row -->

lede commented 2 months ago

That isn't very clear from the documentation which is probably where his confusion came from. I looked as well and it just says "add these classes to an element" which implies that they are already in the stylesheet.

Marta Szymanska commented 2 months ago

I understand that you had a problem with finding yourself in our documentation but as you can see, in our code example, you can copy and paste both types of code - HTML and CSS one. If you would do this, everything would work then.

lede commented 2 months ago

Yes I know. I tried it and it didn't work, so I checked the css to find the styles weren't there. The OP was obviously expecting the additional gradients to be available because it just says add the classes without mentioning that you also need to add the css. I think it just needs to note that you need to add the styles for the additional gradients to your css then add the class to an element

Bartłomiej Malanowski commented 2 months ago

Lede, thank you for letting us know that something isn't perfectly clear. We'll try to make our extended documentation more understandable

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No