CSS Gradient Color Code Generator

What is gradient color?

It is the smooth transition between two color blends; usually, it blends two or more colors for a perfect result. This design is quite popular in web development, graphic design, and user interface design as it provides depth and focus in creating visual interest in flat designs. Gradient colors add dramatic backgrounds, buttons, and overlays.

Gradient color codes:

The background property defines a gradient using the linear-gradient() or radial-gradient() functions in CSS. Thus, multiple color stops can be specified along a linear or circular axis for a smooth transition between colors.

Common Gradient Color Types

Color blue gradient

The blue gradient usually provides a contrasting color or a richer rendering of the same color, especially if paired with water, sky, or technology-related types of websites or themes. So, what a blue gradient might look like in CSS:

css:

background: linear-gradient(to right, #00BFFF, #1E90FF);

The code starts with a sky blue color, #00BFFF, which changes to a darker color at #1E90FF. The blue color is quite attractive and gives the website a new look for the users.

Purple gradient color

Gradient colors like purple are usually a combination of several shades of purple or combined with other complementary colors like pink or blue. Purple gradients are ideal for designs that strive to convey creativity, richness, and even elegance. Below is how you can create a gradient in purple.

css:

background: linear-gradient(to right, #800080, #9932CC);

This changes the color of the gradient, it goes from dark purple #800080 to a lighter color: #9932CC, therefore, it has the effect of rich artistic work.

gradient color pink

Gradient color is one of the really liberating movements, and since gradients are related to the colors ranging between light pastel and dark colors and contrast with a big impact, they are mainly applicable where the design has to target this audience. The pink color gradient is as given below, just copy and paste it on your site.

css:

Background: linear-gradient(to right, #FF69B4, #FF1493);

This gradient travels from light, playful pink through to a deeper, more highly saturated pink.

Gradient Pink

gradient pink color is normally a pink-based gradient that shifts between one pink to another or to some complementary colours such as white or purple. Gradients of pink are greatly used on fashion and beauty sites. Here is a basic example of a pink gradient:

css:

background: linear-gradient(to right, #FFB6C1, #FF6347);

This one has the gradient start soft light pink #FFB6C1 into a warm coral pink #FF6347, thus very romantic or feminine in color.

color gradient purple

The common gradient purple gradient usually combines various shades of purple and offers a smooth transition between the lighter and darker tones. A purple gradient often suggests a luxurious or mystical color that is associated with higher end product advertising or artistic portfolios. For example,

css:

background: linear-gradient(to right, #8A2BE2, #4B0082);

This gradient ranges from bright purple #8A2BE2 to deeper indigo #4B0082, giving a very beautiful, rich effect.

Gradient Red

Gradient reds are one of the most emotionally charged colors, and there is a good reason for that – they evoke a sense of passion, energy, and urgency. Here is how to code a red gradient:

css:

background: linear-gradient(to right, #FF0000, #DC143C);

This gradient started bright red at #FF0000, and into far deeper crimson red of #DC143C, to bring it out strongly dramatically.

Pink Color Gradient

Pink color gradient is the smooth transition between pink colors, whether that is from light pink to dark pink or a combination with other complementary colors like purple or red. Here's an example of a pink color gradient:

css:

background: linear-gradient(to right, #FFC0CB, #FF1493);

This gradient is a pastel baby pink (#FFC0CB), fading to a bright popping pink (#FF1493) and offering balance yet playfulness.

purple color gradient

Purple gradation color usually includes several shades of purple, ranging from light lavender to deep purple or violet. The use of purple gradients is extremely creative and sophisticated. Here's an example:

css:

background: linear-gradient(to right, #D8BFD8, #8A2BE2);

It is one from lavender-colored (#D8BFD8) to deep purple (#8A2BE2) for a silky smooth and luxurious look in the gradient.

Purple Gradient

A purple gradient is a gradual change from one color to another in a group of purple shades. Generally, the term gradation is used in color theory and design to indicate a smooth transition from one color to another. A purple gradation may look like this:

css:

background: linear-gradient(to right, #EE82EE, #9400D3);

This gradient flows from light violet (#EE82EE) to dark violet (#9400D3), so it creates a rich and bright visual effect.

Purple Gradient Color

Purple gradient color occurs as an outcome of several shades of purple that generally range between light lavender to deep royal purple. They are good for artistic or high-end themes. Here is an example:

css:

background: linear-gradient(to right, #DDA0DD, #8A2BE2);

This gradient brings pale purple (#DDA0DD) together with deep royal purple (#8A2BE2), for a soft yet sophisticated look.

Colour Green Gradient

This is a color green gradient, in which shades of green may range from light mint to deeper forest greens. This gradient is very suitable to designs that are trying to convey a sense of nature, serenity, or sustainability. Here's a sample of a green gradient:

css:

background: linear-gradient(to right, #98FB98, #228B22);

This gradient starts off as a light green color (#98FB98) and then fades into dark, earthy green (#228B22), giving off a very natural and soothing feeling.

Gradient Color Black

Gradient color black has a gradient that fades from black to gray or another dark color. It can be used for sleek, modern, or minimalist designs. Here is an example:

css:

background: linear-gradient(to right, #000000, #808080);

It gives it a professional, modern look by imparting a color gradient from the total black (#000000) towards a mid-tone gray (#808080).

Green Color Gradient

In general, the green color gradient is a combination of numerous shades of the green colors from bright lime to deep olive. It will be just great for the green-friendly designs or the product promotion that is friendly to nature, or for any website related to environmental awareness. Here is what the green color gradient looks like:

css:

background: linear-gradient(to right, #32CD32, #006400);

An alternate shift between bright lime green #32CD32 and dark forest green #006400 all blends into a rich natural-looking color scheme, creating red in this gradient background.

gradient background red

A red gradient background is made from a variety of different shades of one single red, so it will create strong red effects for the content. Sometimes it is used specifically to draw urgent attention or to highlight certain things. For example:

css:

background: linear-gradient(to right, #FF6347, #B22222);

It starts with light red-orange (#FF6347) and goes to deeper red (#B22222) for a very strong background.

Gradient Black Background

A gradient black background is a great choice because it goes well on modern, minimalist sites. Here, it employs black with other dark colors such as gray or deep purple. Thus, here is how to do it:

css:

background: linear-gradient(to right, #000000, #2F4F4F);

It blends black (#000000) with dark slate gray (#2F4F4F) for a professional and edgy feel.

Orange Gradient Colors

Orange gradient colors range from various shades of orange for an easy seamless flow of vibrant and excited colors. Example:

css:

Background: linear-gradient(to right, #FF7F50, #FF6347);

This gradient is a color like coral-orange (#FF7F50) towards the deeper red-orange (#FF6347), making it pretty handy to be used whenever there's an illustration or design that calls upon brightness.

Background Gray Gradient

With several different shades of gray (light silver through charcoal black), a background gray gradient can work well with minimalist or modern designs. Below is an example of the application:

css:

background: linear-gradient(to right, #D3D3D3, #A9A9A9);

This gradient will give a soft transition from light gray (#D3D3D3) to dark gray (#A9A9A9) really nice as a professional background.

Gradient Black and White

Using black and white gradient will give classic, time-less gradients for sophisticated minimalistic designs. You can achieve it this way:

css:

background: linear-gradient(to right, #FFFFFF, #000000);

In this above code, white (#FFFFFF) and black (#000000) are smoothly moved out to create sharp contrast. Gradient background gray requires shades of gray to generate soft neutral backgrounds for your websites. Below is the view:

background: linear-gradient(to right, #BEBEBE, #696969);

It starts with a light gray #BEBEBE then moves into the middle gray #696969 that makes for a clean background and subtle look.

Gradient Green Background

A gradient green background combines various shades of green to give a refreshing and natural feel. Here's an example:

css:

background: linear-gradient(to right, #90EE90, #006400);

This gradient takes off with a light soft green (#90EE90), which fades into the deep forest green (#006400). The implication is then connectivity and serenity, so to speak, as it speaks to nature itself.

Rate Us Now – Your Opinion Helps Us Grow!

Other Related Tools

FAQs On CSS Gradient Color Code Generator

Tabs

background: linear-gradient(to right, red, yellow);

background-image: url('gradient-image.png');

background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 0, 255, 1));

background-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */