Where it all starts

The history of the gradient goes as far back as humankind’s first perception of a sunrise and a sunset. Where the sky meets the earth with the sun as a strong light in between, all kinds of shimmering, melting, blending, and oozing effects are happening at the blink of an eye. Add clouds, water-particle carrying wads of reflecting puffs, and your gradient possibilities take off into infinity.

Gradients as shimmering seamless colors

A mediterranean sunset captured in early may renders soft hues and pastel colors.

Critics asides, gradients in their natural environment keep us mesmerized forever, as they perform the spectacle of light, traveling from lighter to darker shades and everything in between.

From nature to screen

Translate this sunset view to a digital equivalent and the result is equally stunning. Grab yourself the perfect tool to create your gradient. This ocean sunset image is sampled with grabient.com, a gradient generator that displays interactive mini-screens to edit one of their preset gradients to your own color specs. The results are instantaneous. {1}

A soft-pastel sunset adapted in rgb from grabient.com, an online gradient generator with multiple features, such as the slider, rotation function, and color selector in varying color modes.

Digital capabilities give us the tools to capture the mood of that very moment that inspired us in the first place.

Let nature be your gradient inspiration

Catch the elusive rainbow colors reflecting in the clear ocean waters

Crystal-clear ocean water by the islands of the Maldives. Photo by Muhammad Saushan on Unsplash.

Light reflecting off the clear waters in the Maldive Islands produces a spectral fantasy of rainbow gradients. The website cssgradient.io, a handy gradient-to-css tool, references gradient colors for immediate use as a css style. How cool! {2}

cssgradient.iorenders your specified gradient rgb or hex colors, including transparency parameters, in a css text box and lets you copy the style. All you need to do is apply it to your css style sheet.

cssgradient.io translates the specified rgb colors into a css style parameter for copy/paste. For example, the background translates to: background: linear-gradient(90deg, rgba(84,147,167,1) 0%, rgba(132,228,249,1) 23%, rgba(161,247,186,1) 39%, rgba(255,255,255,1) 49%, rgba(227,255,180,1) 64%, rgba(0,212,255,1) 89%, rgba(64,131,147,1) 100%);

Create eye-catching visuals with your css style sheets, exactly to the parameters specified on your cssgradient.io app.

A gradient renders branding and sets the mood for the user

This simple landing page, featuring the linear gradient above, exudes a feeling of summer, days at the beach, refreshing water adventures, and sophistication.

An illustrative adaptation of the ocean water gradient created with cssgradient.io and set as the background-image in this mock-up landing page. Palm icon made by Freepik from Flaticon.

Gradient possibilities are endless

Creativity happens where there is lightness and darkness and every color in between!

Translate the mysteries of the Northern Lights to the screen

Green-yellow-pink Northern Lights (also referred to as aurora borealis) on Lake Myvatn, northern Iceland. Photo by Martin Brechtl on Unsplash.

What breathtaking spectacle of undulating night sky-gradient display, all meant for us to see as the ultimate visual ecstasy.

In reality, only very few lucky people on this earth will ever experience such a spectral performance first hand. But for the rest of us, and especially for us as designers, we can dazzle with screen gradients that can hold many a viewer’s breath.

Sample these gradient colors at the source, and add them to vector designs

Vector design programs offer their own tools to render gradients. Adobe Illustrator has many different features to apply a multitude of styles to a gradient.

This gradient is rendered in Illustrator as a a radial fill. A slight gaussian blur is applied to soften the outside edges.

Gradient techniques

Just like in nature, gradients happen in unexpected way, and there are many vector-based tools for randomizing gradients.

This gradient of the Northern Lights image is a vector-based gradient wire mesh, manipulating points and applying colors to points within the mesh. The gradient mesh is object specific, and because it is based on vector properties, it can get edited easily.

The gradient mesh in Adobe Illustrator is a feature that creates a wire frame, to specified properties, on any vector shape. It is a perfect tool to create dazzling gradient renderings, especially if fades are more linear. Mesh gradients resemble the original visual more closely. In this case, the above Northern Lights image is used as a source visual for shapes and colors.

A vector based gradient can get edited easily, shapes can get adjusted in their path, and color values can get set in more nuanced ways.

#css #design-process #design #gradient