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.
Click adjacent to the gradient property to open the gradients panel. Using this panel, you can:
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%)
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'.
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:
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).
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.
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.
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.