HTML Gradients

Simple gradients can serve many nifty fuctions in simple html design. Greater artistic freedom in coding can replace the need for image files while providing more options for responsiveness within the design and keeping a crisp resolution. These are only shortcut examples of different gradients. For more information please visit css-tricks.com or developer.mozilla.org.

This div has a 30 degree divide between two colors.

The two colors meet exactly in the middle.
{background-image: -webkit-linear-gradient(30deg, #faa822 50%, #fac266 50%);}

This div has a 150 degree divide between two colors.

90 – 180 degrees will populate colors from right to left.
(150deg, #cc0000 25%, #ff4444 25%)

With the color “markers” apart you get a gradient.

The light blue starts 75% from the right, the medium blue 55% from the right and create a gradient.
(120deg, #0d47a1 55%, #4285F4 75%)

This div has a 45 degree divide between three colors.

Light green at 20%, blue at 40% & dark green at 80%
(45deg, #2BBBAD 20%, #0277bd 40%, #00695c 80%)

This div has a 70 degree divide between three colors.

The purple and magenta both have their markers at 30% for a sharp border and the pink at 80% to crete a gradient.
(70deg, #880e4f 30%, #e91e63 30%, #f06292 80%)

This div has four colors

The two center colors form a hard edge while forming a gradient to the left & right.
(30deg, #7e57c2 10%, #311b92 45%, #673ab7 45%, #b39ddb 65%)

This div has four colors

The color markers start and end beyond the div between -100% to 120% for a smoother gradient.
(120deg, rgba(250,196,34,1) -100%, rgba(250,195,100,1) 30%, rgba(244,64,53,1) 65%, rgba(0,0,0,1) 120%)

This is a simple radial gradient

The gradient extends according to its bounding box.
{background: radial-gradient(#2BBBAD, #0277bd);}

Leave a Reply

Your email address will not be published. Required fields are marked *