Angular Bootstrap Gradients
Angular Gradients - Bootstrap 4 & Material Design
Angular Bootstrap gradient is a linear color progression - a transition between two colors is fluent. Gradient can be used in various of components.
- Documentation page,
- Magazine,
- ERP system.
See the following breadcrumbs examples:
Basic gradients MDB Pro component
Gradients are now coming back to website deisgn, so it's good idea to try them out in your projects.
See the following Angular Bootstrap gradients examples:
purple-gradient
blue-gradient
aqua-gradient
peach-gradient
Add to an element one of the following classes:
.purple-gradient.blue-gradient.aqua-gradient.peach-gradient
purple-gradient
blue-gradient
aqua-gradient
peach-gradient
Gradient on the image
Before
.jpg)
After
.img-gradient{
position:relative;
display:inline-block;
}
.img-gradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)),
color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b',
endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
display:block;
}
Gradient within cards MDB Pro component
.jpg)
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam,
nisi ut
aliquid ex ea commodi.
Button
.img-gradient {
position:relative;
display:inline-block;
}
.img-gradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)),
color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b',
endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
display: block;
}
.img-gradient-overlay { /* FF3.6+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
background: -o-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
background: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */ /*
Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b',
endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
border-radius: .3rem;
}
Additional gradients
warm-flame-gradient
night-fade-gradient
spring-warmth-gradient
juicy-peach-gradient
young-passion-gradient
lady-lips-gradient
sunny-morning-gradient
rainy-ashville-gradient
frozen-dreams-gradient
winter-neva-gradient
dusty-grass-gradient
tempting-azure-gradient
heavy-rain-gradient
amy-crisp-gradient
mean-fruit-gradient
deep-blue-gradient
ripe-malinka-gradient
cloudy-knoxville-gradient
morpheus-den-gradient
rare-wind-gradient
near-moon-gradient
Add to an element one of the following classes:
.warm-flame-gradient.night-fade-gradient.spring-warmth-gradient.juicy-peach-gradient.young-passion-gradient.lady-lips-gradient.sunny-morning-gradient.rainy-ashville-gradient.frozen-dreams-gradient.winter-neva-gradient.dusty-grass-gradient.tempting-azure-gradient.heavy-rain-gradient.amy-crisp-gradient.mean-fruit-gradient.deep-blue-gradient.ripe-malinka-gradient.cloudy-knoxville-gradient.morpheus-den-gradient.rare-wind-gradient.near-moon-gradient
warm-flame-gradient
night-fade-gradient
spring-warmth-gradient
.img-gradient {
position:relative;
display:inline-block;
}
.img-gradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)),
color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b',
endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
display: block;
}
.img-gradient-overlay { /* FF3.6+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
background: -o-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
background: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */ /*
Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b',
endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
border-radius: .3rem;
}
Testimonial cards with gradients MDB Pro component
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
.jpg)
John Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.
.jpg)
Anna Aston
Neque cupiditate assumenda in maiores repudiandae mollitia architecto.
.jpg)
Maria Kate
Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident
voluptate esse
quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
John Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
adipisci.
Anna Aston
Neque cupiditate assumenda in maiores repudiandae mollitia
architecto.
Maria Kate
Delectus impedit saepe officiis ab aliquam repellat, rem totam
unde
ducimus.
.lady-lips-gradient {
background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}
.sunny-morning-gradient {
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.rainy-ashville-gradient {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}