Stacks Image 6

Gradient

An infinite number of background styles.

Gradient

Gradient is limitless in its configuration. How you display your gradient background is limited only by your imagination.

Overview.

Gradient creates gradient colour backgrounds inside its self. You can place any content inside a gradient stack, so Gradient stack is to all intents and purposes behaving exactly like a default 1 column stack in use. The header section above is created with Gradient stack, and you can see lots of other examples below.

Create gradients with up to 4 stops of colour, any of which may be self transparent revealing what ever is behind the stack.

You can choose to add an image background into the stack, and have that image partially revealed through the portions of the gradient you set to be semi transparent.

Instant download.

Version : 1.0.4

Responsive : Yes

First released : 1/9/2016

Last Updated : 12/9/2016

Stacks V 3.0 or greater.

Base Gradients.

Select the type of gradient and direction you require.

With just 2 stacks settings you can select from a list of predefined gradient types, and the direction of the gradient.

Linier gradient preset directions.

Stacks Image 1103

Top left to bottom right.

Stacks Image 1105

Left to right.

Stacks Image 1107

Top right to bottom left.

Stacks Image 1109

Top to bottom.

Radial gradient preset. The origin of the radial gradient can be anywhere in the container.

Stacks Image 1119

Up to 4 colour stops in any of the gradient types.

Stacks Image 1123

Any of the colour stops may contain transparency, revealing any image you place behind.

Stacks Image 1127
Stacks Image 1129

Live demo 1

You will have seen us use the stack in this configuration throughout the Doobox website for banners.

Simply select a radial gradient type with 3 colour stops, and lighten the centre colours. Set the position of the gradient y axis start point, to around 60% to lower the start position and give a spotlight effect.

Live demo 2.

Alpha colour pickers make it possible to partially reveal the content behind the stack.

Here we use the linear gradient type with 4 colour stops. We have reduced the opacity of the ending colours to allow the image behind to show through. You can add an image in the background of the gradient stack by using the background settings that come with every single stack you use by default.

Live demo 3.

Use a small image tile as the background.

Here we have a two colour vertical gradient. We selected black for both colours and set the opacity of the lower black colour to 50%. You can see the small dots tile showing through, that we added to the gradient stacks default background image setting and told the image to tile.

Live demo 4.

Up to 4 colour stops in any configuration, but simple is effective..

Simple is often most effective, Here we simply use 2 colour stops, linear gradient, top left to bottom right.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Gradient type

The choices here are :

  • Linear
  • Radial
Linear gradients are generated in a straight line across the direction you choose in the setting below.

Radial gradients emirate from a point and radiate outward in a circular direction.

Direction

Only available for linear gradients, the choices are :

  • Diagonal top left to bottom right.
  • Diagonal top right to bottom left.
  • Horizontal.
  • Vertical.

Transparency

This is a global transparency setting and reduces the opacity of the entire gradient, revealing what ever is behind.

Colour pickers

You can choose to use unto 4 colour pickers for the colours of the gradient. The start and end colour pickers are mandatory, as it always takes at least two colours to form a gradient. If you enable either or both of the mid point colour pickers you are given sliders to position the start point of the mid point colours within the overall gradient.

All of the colour pickers allow you to add transparency to the colour you are picking when the colour picker window opens you will see a transparency slider at the bottom.

Override text colours.

When selected you can choose to override the text colour of any stack you add inside Gradient stack as your content.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Gradient needs no fancy user interface for ease of use. It could not be easier. Just treat it as a regular default 1 column stack with the obvious exception that you see the chosen gradient in the background.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Gradient Stack