Gradient Overlays

Gradient overlay classes allow you to add translucent gradients over the top of images. Because they are made using psuedo elements, gradient overlays can be targeted to be hidden or shown at specific breakpoints, ideal for use with our Featured Panels.

                                
                                    <div class="overlay-gradient-y-black">
                                        <img class="w-100" src="https://via.placeholder.com/1200x600" alt="Placeholder">
                                    </div>
                                
                            

Make Your Own Gradients

To add your own gradients classes to your theme, head over to scss/_f-layout-elements.scss and scroll to E. Gradients. Here you will find a few examples that you can modify, or you can make your own.

The class that you create here will be used in your html. Name it whatever you want, of course. For the sake of example, try .gradient-overlay-{direction}-{color} where direction is x or y, and color is black, white, dark, light, or sunset.

                                
                                    .overlay-gradient-x-sunset::before{
                                        @include linear-gradient(
                                            $direction: to right,
                                            $first-color: orange,
                                            $second-color: purple,
                                            $first-color-opacity: 0.25,
                                            $second-color-opacity: 0.75,
                                            $first-color-position: 0,
                                            $second-color-position: 100%
                                        );
                                    }
                                
                            

The Gradient Overlay Mixin

Gradient Overlays call a mixin from scss/_c-custom-mixins.scss under C. Linear gradient. These mixins are simple by design. Feel free to modify them to your liking, or replace them altogether.