Use this topic to learn how to use CSS Designer panel to apply and edit gradients to your web page background.

Using the CSS Designer panel, you can apply gradients to the background of your websites. The gradient property is available in the background category.

The gradient property
The gradient property

Click adjacent to the gradient property to open the gradients panel. Using this panel, you can:

  • Choose colors from different color models (RGBa, Hexadecimal, or HSLa). Then, save different color combinations as color swatches.
    • To reset the new color to the original color, click the original color (K).
    • To change the order of the swatches, drag the swatches to the required position.
    • To delete a color swatch, drag the swatch out of the panel.
  • Use color stops to create complex gradients. Click anywhere between the default color stops to create a color stop. To delete a color stop, drag the color stop out of the panel.
  • Specify the angle for linear gradient.
  • To repeat the pattern, edit background-repeat property.
  • Save custom gradients as swatches.

Let's understand the following code:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg: Indicates the angle of the linear gradient
  • rgba(255, 255, 255, 1.00): Color for the first color stop
  • 0%: Indicates color stop

Note:

Only '%' values for color stops are supported in Dreamweaver. If you use other values such as, px or em, Dreamweaver reads them as 'nil'. Also, Dreamweaver does not support CSS colors and if you specify these colors in the code, such colors are read as 'nil'.

Rendering gradients in web browsers

When you use gradients as background, you can configure Dreamweaver to render the gradients appropriately on different web browsers. Dreamweaver adds appropriate vendor prefixes to the code that enables web browsers to display gradients suitably.

Dreamweaver can write the following vendor prefixes along with w3c format:

  • Webkit
  • Firefox
  • Opera

By default, Dreamweaver writes vendor prefixes for Webkit and Dreamweaver Live View. You can choose the other required vendors from the Preferences dialog box (Preferences > CSS Styles).

Note:

For Box shadow, Webkit and w3c prefixes are always generated irrespective of whether you have selected them in the Preferences or not.

Any changes to the gradients are reflected in the vendor-specific syntaxes too. If you open an existing file containing vendor-specific syntaxes in Dreamweaver CC, ensure that you choose the required vendor prefixes in Preferences. Because, by default, Dreamweaver updates only Webkit, and Dreamweaver Live View-related code when you use or change gradients. So, the other vendor-specific syntaxes in your code do not get updated.

Swap background images and gradients

You can change the order (in which they appear in the code) of the background images and gradients with a single click.

Click the arrow next to the adjacent to the url or the gradient property in CSS Designer.

Note:

Dreamweaver CC contains a basic implementation of the swap background feature. When you have multiple values or images, swap may not work as expected. Also, suppose that you have an image, second image, and then a gradient applied to the background. Swapping the gradient results in the following order: gradient, second image, first image.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy