Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now
Slide 1

Free Full Width Slider

Smart Slider 3 is the best rated free full width slider plugin in the WordPress Plugin Directory. More than 70.000 happy users choose us!

Slide 2

Beautiful Visual Interface

The interface is clear and simple, every action is straightforward. Creating a new slider and adding slides are quick and easy process.

Slide 3

Fully Responsive Slider

You can adjust the layers on tablet and mobile view. Smart Slider 3 allows you to hide any layer of your full width slider on any device.

previous arrow
next arrow

Gradient Slider

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Need a good looking, modern slider that loads fast? Have a look at this gorgeous Gradient slider example, which won't slow down the page with large images.

Free: Give Smart Slider 3 a try for free. Download now!

Minimum version:



When you think of full width sliders, usually you picture a large section on the page which has huge, moving images. This gradient slider example takes a different approach. While it does have images on each slide, these are small pictures. Each slide in this slider has a linear gradient as background. We built it in a way that each slide’s starting color is the finishing color of the previous slide. This creates a continuous gradient effect throughout the slider. The effect gives the gradient slider example a modern look.
Full width layout


You can find a heading layer, a text layer, 2 button layers and an image layer on each slide. The button layers are useful which can be used as a great call to actions, and you can navigate your visitors to other pages. The images on the right are different on each slide, and you can change them to your own image.

Layer list of the Gradient Slider
Layer list of the Gradient Slider


When you switch slides with the arrows or dragging your mouse, you can notice a horizontal animation. This animation is the main animation of the slider. You can change that also you can set the animation duration to bigger or lower at the Slider settings → Animations tab.


The slider uses a simple layout: there is a row with 2 columns. The left column contains the textual layers, and the image is on the right column. On mobile this row wraps after 1 column, so the image will be on the top, and the textual elements are below that.


The slider is mobile friendly, which means several important things for small screen users. The most important part is that this slider is completely touch friendly. Viewers can easily switch slides by swiping. The button is big enough to be a great target for fingers. This behavior happens because of Smart Slider’s unique slide building way, the Default position. This positioning mode allows you to work on your slides fast and create content with amazing responsive behavior. And you won’t even have to spend hours to achieve such a great look on small screens.

Related Post: Do you need a Free Full Width Slider for your Site?