RGBA colors and gradients


Step 1 - RGBA colors

If you want to manipulate a mask (change the color or transparency) - then play with this CSS code:



  .rgba-gradient {
    background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
    background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
    background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
  }

      

Note: We use prefixes like -moz and -webkit to provide a proper rendering for different browsers.

The code above is a gradient so it contains 2 different RGBA colors.



<!-- RGBA Example -->
rgba(213, 15, 61, 0.6)

    

The RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0, 1);

If you want you can use one of MDB predefined RGBA colors. To learn more read our Colors Docs.

You can also easily change any Hex color to RGBA color by using this color generator.

Just copy any of the MDB colors and paste it to the generator. It will change it to a RGBA color that you can also modify (for example by changing opacity).

Step 2 - gradients

A few words about gradients.

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax



background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

    

Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts green, transitioning to blue:



        #example {
          background-image: linear-gradient(green, blue);
        }

    

Linear Gradient - Left to Right

The following example shows a linear gradient that starts from the left. It starts green, transitioning to blue:



        #example {
          background: linear-gradient(to right, green, blue);
        }

    

Linear Gradient - Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at the top left (and goes to the bottom right). It starts green, transitioning to blue:



          #example {
            background: linear-gradient(to bottom right, green, blue);
          }

      

Step 3 - using a gradient with opacity as a mask for Full Page Intro.

By using the knowledge above we will create a mask for our Full Page Intro, which will use three-colored gradient with partial transparency.

Go to the Gradient Generator and choose the gradient you like. Next, copy its CSS code.

I chose this one:



        background: #23074d;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #cc5333, #23074d);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #cc5333, #23074d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    

Next, we have to change all the hex colors (example: #0F2027;) to RGBA colors (example: rgba(15, 32, 39, 0.6); )

Use the Color generator to change all the colors to RGBA.

In my case, it looks like this:



        background: rgba(35, 7, 77, 0.6);  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    

Now, in the CSS file, replace the code of the .rgba-gradient element with your new gradient.



        .rgba-gradient {
          background: rgba(35, 7, 77, 0.6);  /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6));  /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }

    

Save the file. Your new gradient mask is ready. If you want you can play with opacity, colors and gradient direction.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits