Hi! We really should talk!

We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon and many more.

Hop on the phone with one of our publishing consultants and get customized advice on how to get started.

MADE WITH

READZ

TRY IT FREE

Jump on the gradient background design trend.

A complete overview of gradient backgrounds with examples.

Start publishing online content like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.

GET A DEMO

A gradient in design blends two or more colors in a gradual progression. Designers apply the effect to backgrounds, UI elements, and even typography to add depth to elements in styles ranging from subtle to vibrant. We’ll talk about the gradient design trend and different types of gradients, and showcase highlights of gradient backgrounds. We’ll also give you a tutorial on how to design a gradient design in CSS, as well as free gradient backgrounds to use with your Readz publication.

Gradient Backgrounds In Design

Incorporating gradients into your design is a versatile way to transform the look and feel, from retro to very modern. In web design, gradients are not limited to catchy or toned-down backgrounds but appear in image overlays, buttons, animations, or hover effects.

Bold and vibrant gradients focus attention, create contrast or fresh and gaudy visuals. Gradients with darker and lighter tones can add shadows and highlights to make a flat design pop out into an additional dimension.

The gradient background plays on the shoes' color scheme.

What is a gradient background?

A gradient background transitions from one color to another over the entire designated background area. This transition can be a smooth blend or a stark contrast. Gradients are not limited to only two colors but can incorporate three or more for full rainbow effects.

There are more ways to distinguish different gradients apart from colors. Gradients with a single horizontal, vertical, or diagonal direction are called linear. Radial gradients have a dot, circle, or shape at their center and progress through colors from the inside out or outside in. Other color transitions are also possible, and a gradient may repeat one progression over and over.

A gradient background can give a design an interesting texture, add a depth effect, or seemingly create new colors through the mix and blend to make a design stand out with a unique feel.

What Are Linear And Radial Gradients?

Gradients move from one color to another, or across a spectrum. The "end colors" are the colors stops. Between the two color stops, the midpoint is where your gradient starts switching colors. A gradient with opacity stops also goes from one level of opacity to another. The following are various types of gradients:

Linear: This gradient goes from one color to another in a single direction, horizontally, vertically, and sometimes diagonally.
Radial: A gradient switching color radially from a central point outwards, or from the outside in.
Angular: In this gradient, the colors switch around an angled line.
Shaped: This gradient has a shape, such as a diamond, at its center.
Multi-color: A gradient blending a spectrum of colors.
Duotone: A gradient blending only two colors.
Tri-color: A gradient blending three colors.

A duotone linear gradient background.

A multi-color linear gradient background.

A multi-color radial gradient background.

A repeating gradient background.

More gradients:

Banding: A gradient can break down into strips or bands of color. If the effect is undesired, you can add noise or choose slightly different colors.
Mesh: A gradient where the blending of colors follows a grid made up of mesh points, which can create shapes within the gradient.
Radial ramp: A color progression within a radial gradient, not necessarily from the center outwards.
Blurred: A gradient with an applied blur effect to create a softer or more grainy appearance.
Landscape: A vertical color progression which creates a horizontal design with a distinct horizon, separating an upper and lower part, or "sky" and "land".
Non-regular blending: This gradient blends colors in a non-linear way, creating a distortion effect.
Bending: A gradient following a path to create bands and give an appearance of depth and shape.
3D Mapping: This gradient is mapped onto a 3D object.
Retro Style: This gradient has a distinct retro or vintage look, commonly with neon colors choices or burst effects.
Silhouette: A gradient applied to color a photograph for silhouette or contour effect.

Examples of different gradient backgrounds (source)

The Gradient Design Trend

You might associate a retro look with gradients in design; that’s because they have been around before, from the sunburst designs of the 60s and 70s to the neon color progressions of the 80s to the flashy, gaudy gradients of the 90s. In web design, gradients were trending with the “Web 2.0” shift.

Flat and Material Design pushed gradients aside. Minimalism and fast-loading pages replaced “heavy” designs with longer load times. However, you can use gradients as lightweight CSS3 design elements, and designers have begun to mix the flat color palettes with gradients to create a new modern feel and add depth while keeping the pleasing aesthetics of flat design.

The current gradient design trend catches the eye and grabs the attention of website visitors, without indulging in nostalgia or retro-throwback. Both luminous colors and subtle depth effects create interest and allow designers to stand out with their work.

Specifically, gradient backgrounds are an element to add and increase depth in web design for a realistic feel and three-dimensional elements, which can often give the impression of a virtual or augmented reality. In combination with shadows, gradients can imitate natural visuals, such as the sky, the sea, a horizon, or day-night progression.

Communications agency Monograph (

source

Examples of gradient design

Asana

Asana uses soft tone gradients, not only in the logo, but also throughout the website. The result is a subtle depth effect.

Instagram

Instagram uses gradients with radiant colors for the logo, throughout the website for backgrounds, UI elements, as well as designs to create a fresh, vibrant look appealing to a diverse audience.

Stripe

Stripe is taking the flat Material Design approach to the next level. Tri-color icons and elements add dimension, while soft shadows create the illusion of floating images and elements on top of animated multi-colored gradients. The look is modern, vibrant, and professional.

Spotify

The music streaming portal Spotify is known for its dark mode, but the design also relies on gradients and duo tones, both on the website as well as within the players. For playlists and albums, for example, the gradient effect in the background is adaptive to the cover image, automatically picking colors to give off an integrated look.

Apple

Apple uses multi-colored gradients on the landing pages for its products, as well as for promotional ads and in the wallpapers on the actual devices. The company moved away from non-uniform blends of colors for the iPhone X to radial gradients for the iPhone 12.

Julie Bonnemoy

Freelance designer Julie Bonnemoy uses an animation with gradients applied to floating objects in pastel colors for her portfolio website. She has created various gradient effects for clients.

Adobe

Adobe uses gradients and gradient backgrounds throughout the website to highlight the creativity that the company’s products can unleash, as well as the wide range of products.

Michelberger Hotel

The website of Hotel Michelberger relies entirely on multi-colored linear gradient backgrounds to create a fresh and appealing look. As the visitor scrolls down through the different sections, the background colors change.

Gucci Beauty

The website for Gucci Beauty has a changing linear gradient background with an interactive element on top, seemingly floating effortlessly. The background colors enhance the message of diversity and positivity with vibrant, yet softened tones.

Readz

Readz uses subtle duotone gradient backgrounds combined with multi-colored gradient effects for typography and design elements to deliver a modern version of flat design with a dimensional depth effect that creates a refined, creative, and professional look.

Tools for background gradient design

These tools will help you pick color combinations and make it easier to design gradient backgrounds for your website or online project.

CSS Gradient: Having trouble putting the CSS together for gradient backgrounds? This website lets you choose parameters for linear and radial gradients, pick the colors, and copy and paste the code into your project.
Easing Gradients: Documentation and an editor tool to soften the hard edges of linear gradients by controlling the color mix in CSS.
UI Gradients: Pick among existing gradients, complete with CSS to copy. Grabient: This website lets you pick among existing gradients, modify them according to your needs, or create new ones. You can then grab the CSS.
My Color: Generate a CSS color gradient from stop colors and an orientation.
Adobe Color: Allows you to pick colors for a palette with a color wheel and extract a color theme or a gradient from an existing image.
WebGradients: Free collection of linear CSS gradients for website backgrounds.
Cool Hue: More gradients you can copy and paste into your CSS.

Cool Gradient Backgrounds in Readz (Free)

Here are some free gradient backgrounds offered in Readz which you can use in your designs. It includes blue gradient examples, green gradient examples and blue gradient examples.

To retrieve these gradients in Readz, just open up the pre-made blocks in the left panel, select the gradients, and drag them onto your canvas. You can choose and keep the one you want to keep.

Adding a Gradient Background in Readz

To add a Gradient background, add a background layer to a content element by clicking the Add Layer button. Then change the layer to a Gradient. The panel with options for gradient backgrounds will open up.

In this panel, you can:

set the gradient stops
set the color of the gradients
select Linear of Radial gradients

More details on these options are explained below.

Linear and Radial gradients

Linear gradients are gradients in a single direction. You can adjust the direction by clicking and moving the 'knob' or by entering the value in degrees directly.

Radial gradients are gradients that are shaped from the center of the element.

Gradient Stops

Gradients stops allow you to change the color and opacity of the gradient. By default, the gradient will use two stops. You can add more stops by clicking on the color bar as indicated below. To delete a stop, select the stop and click the 'delete' button.

How Do You Design A Gradient Background In CSS?

You can design website backgrounds with CSS. In general, the background-image property allows you to control background images for an element. Defining the property further enables you to display smooth color transitions and create linear and radial gradients.

Linear Gradients In CSS

To create a linear gradient, you define the direction, and the color stops. If unspecified, the default direction is top to bottom, but can also specify diagonal gradients and use angles. Multiple color stops, opacity, and repeating linear gradients are also possible.

Syntax:

#grad { background-image: linear-gradient(direction, color-stop1, color-stop2, ...); }

Examples:

#gradient { background-image: linear-gradient(to right, red, green); } #grad { background-image: linear-gradient(80deg, red, yellow, green); }

You can also specify colors by their value with the rgba() function, where you can specify transparency as 0 or 1.

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } The function repeating-linear-gradient can create a repeating background: #grad { background-image: repeating-linear-gradient(red, green 20%, green 10%);

Radial gradients in CSS

You define a radial gradient by its center with the radial-gradient function and at least two color stops. Other parameters are the shape, size, and position.

#grad { background-image: radial-gradient(shape size at position, start-color, ..., last-color); }

You can set the shape parameter as circle or ellipse, the default. The size parameter can take the values closest-side, farthest-side, closest-corner, and farthest-corner.

You can use the function repeating-radial-gradient() to create repeated radial gradients. It is also possible to space the colors stops unevenly by specifying a percentage: #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

Best Practices

Feel free to experiment with gradients for your background design, but if you need some guidance, follow these best practices for quick results that don’t look over the top:

Simplify: To create pleasant backgrounds, limit the number of colors. Stick to only two colors when in doubt. Color choice: Avoid using conflicting colors and work with a color wheel or color tool to find the fitting analogous, monochromatic, triad, complementary, compound or shade colors for your gradient background. Color theory: Use color psychology effectively and learn how to design with color. Linear gradient: If your background is only visible in a square, rectangular, or polygonal area, use a linear gradient. Radial gradient: For backgrounds only visible in a round or oval area, use a radial gradient.