Matrix Cølors
Colors based on UI flat colors https://flatuicolors.com/
turquoise
#1abc9c;
emerald
#2ecc71;
peter-river
#3498db;
amethyst
#9b59b6;
wet-asphalt
#34495e;
green-sea
#16a085;
nephritis
#27ae60;
belize-hole
#2980b9;
wisteria
#8e44ad;
midnight-blue
#2c3e50;
sun-flower
#f1c40f;
carrot
#e67e22;
alizarin
#e74c3c;
clouds
#ecf0f1;
concrete
#95a5a6;
orange
#e74c3c;
pumpkin
#d35400;
pomegranate
#c0392b;
silver
#bdc3c7;
asbestos
#7f8c8d;
Colors based on UI material colors http://materialuicolors.co/
red
#CF000F;
blue
#19B5FE;
green
#87D37C;
yellow
#CF000F;
pink
#D2527F;
purple
#674172;
amber
#FFC107;
lime
#CDDC39;
deep-purple
#673AB7;
brown
#795548;
teal
#009688;
cyan
#00BCD4;
bg-white
#ffffff;
bg-grey
#f0f0f0;
bg-dark
#000000;
Footer Cølors
style 1
color 2
color 3
style 2
color 2
color 3
style 3
color 2
color 3
Style 4
color 2
color 3
Style 5
color 2
color 3
Style 6
color 2
color 3
Style 7
color 2
color 3
Style 8
color 2
color 3
Style 9
color 2
color 3
Awesøme gradients
The helper class bg-gradient can be used to add gradient color effect to your images in slideshows and single fullscreen image. There are 5 options that you can use ( from bg-gradient to bg-gradient-5 ). Here's an example:
<!-- ************* Single image Carousel ************* -->
<div id="image-fullwidth">
<div class="item">
<div class="hs-overlay bg-gradient">
</div>
<img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
<div class="carousel-caption animated fadeInLeft">
<div class="inner">
<h1 class="color-white big weight-600 left-align">
It's time for custom design
</h1>
<br />
</div>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your fullwidth image
</div>
The default 5 styles available in Matrix themes. You can change/add your own one in CSS:
bg-gradient
bg-gradient-2
bg-gradient-3
bg-gradient-4
bg-gradient-5
/* awesome gradients */
.bg-gradient {
background: -webkit-linear-gradient(to left, #1D2B64 , #F8CDDA); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1D2B64 , #F8CDDA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-2 {
background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-3 {
background: -webkit-linear-gradient(to left, #00bf8f , #001510); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00bf8f , #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-4 {
background: -webkit-linear-gradient(to left, #FF5F6D , #FFC371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #FF5F6D , #FFC371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-5 {
background: -webkit-linear-gradient(to left, #16A085 , #F4D03F); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #16A085 , #F4D03F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
Tips and suggestions
You can add other gradients to your widgets without adding further style in CSS, but adding the code directly to Widget/HTML. See an example:
<!-- example of gradients with inline style -->
<div class="hs-description color-white" style="paste here the gradient code">
<h3>
bg-gradient
</h3>
</div>
<!-- example of gradients with inline style -->
<div class="hs-description color-white" style="
background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<h3>
bg-gradient
</h3>
</div>
Do you have any further questions?
Please ask here!
Write a comment