How to Resize Elements and Create Gradients with CSS3 - dummies

How to Resize Elements and Create Gradients with CSS3

By Sue Jenkins

You can do literally hundreds of tricks on your website with CSS3. Among the key tricks are resizing elements of your webpage and creating gradients for your background.

How to resize elements with CSS3

You’ve no doubt heard of resizing a browser window. With CSS3, you can now give visitors the ability to resize any <div> tag or form textarea element by using the resize property. The resize value can be set to none, both, horizontal or vertical, and it is typically paired with the overflow property set to auto.

In the following example, a 300px wide container can be resized both horizontally and vertically, and any overflow content automatically reflows to fit the container’s changing dimensions, adding scrollbars when applicable:

div {

How to create gradients with CSS3

In the past, when designers wanted a gradient background for an element, they’d create a graphic and then repeat it along the X- or Y-axis to fill the space. Using CSS3, you can create your own faster-loading gradients.

Believe it or not, you can create the gradient effect using the background-image property paired with values for the gradient type, position, color stop, and color value. Though the syntax for the CSS is slightly different for webKit than Mozilla, the results are identical:

.gradient {
  /* Safari & Chrome */
  -webkit-gradient(linear,left bottom,left top,color-stop(0, #74B4DB),color-stop(1, #F7ECCA));
  /* Firefox */
  -moz-linear-gradient(center bottom, #74B4DB 0pt, #F7ECCA 100%);
  height: 200px;

In addition to the technique shown here, you can also create more complex gradient effects by using the free online gradient editor on the ColorZilla website.


To find out even more about these ten techniques and working with CSS3 in general, visit and W3C.