MKR RGB Shield Fading

Learn how to gradually increase and decrease the brightness of the LEDs on the shield.


In this tutorial, we are going to fade all of the pixels on the MKR RGB Shield, in and out. This method can also be used for smooth transitions between colors, which gives a better visual effect!

For this, we will create 2x

loops, one to fade in and one to fade out.


The goal of this project are:

  • Fade the matrix on the MKR RGB Shield in and out, using a

Hardware & Software Needed

For Loops

loops are a great method to use when we want something to run for an X amount of times. It is widely used for fading lamps, gradually increase or decrease the speed of motors, or for any other counting mechanisms. Its operation is pretty basic and in this case, only uses one variable, so let's take a look at how it works in action!

1for (int i = 0; i <= 255; i++){
2 // do something 255 times
3 delay(10); //quick pause between the loops

As seen in the snippet above, the variable

is the only variable altered. It is first initialized, and set to
. We then set the value to always be smaller or equal (
) to 255. Finally, we use an increment,
, to increase it.

This means, that as long as the number is smaller or equal to 255, it will continue to increase. Now, we can add code within the curly brackets, and feed the

variable into it. As the variable increases, we can for example use it to light up an LED gradually, or speed up a motor.

1for (int i = 0; i <= 255; i++){
2 analogWrite(i, LED);
3 delay(10);

Now, as we set the delay to 10 milliseconds, it will take 2550~ milliseconds (2.5~ seconds) to gradually light up the LED.


The circuit in this tutorial is very easy. Simply mount the MKR RGB Shield on top of an Arduino MKR board.

How to mount the MKR RGB Shield on top of an Arduino® MKR board.
How to mount the MKR RGB Shield on top of an Arduino® MKR board.

Programming the Board

We will now get to the programming part of this tutorial.

1. First, let's make sure we have the drivers installed for the board we are using. If we are using the Web Editor, we do not need to install anything. If we are using an offline editor, we need to install it manually. This can be done by navigating to Tools > Board > Board Manager.... Here we need to look for the Arduino SAMD boards (32-bits Arm® Cortex®-M0+) and install it.

2. Now, we need to install the libraries needed. If we are using the Web Editor, there is no need to install anything. If we are using an offline editor, simply go to Tools > Manage libraries.., and search for Arduino_MKRRGB and ArduinoGraphics and install them.

3. Here are some of the core functions of this sketch:

    - this class is used for all Arduino_MKRRGB functions.
  • MATRIX.begin()
    - initializes the library
  • MATRIX.beginDraw()
    - begins a drawing session.
  • MATRIX.endDraw()
    - ends a drawing session.
  • MATRIX.fill(r,g,b)
    - sets the color of the fill.
  • MATRIX.rect(startX, startY, width, height)
    creates a rectangle.
  • MATRIX.height()
    - sets the maximum height of the matrix.
  • MATRIX.width()
    - sets the maximum width of the matrix.

The sketch can be found in the snippet below. Upload the sketch to the board.

1#include <ArduinoGraphics.h>
2#include <Arduino_MKRRGB.h>
4void setup() {
5 // initialize the display
6 MATRIX.begin();
7 // set the brightness, supported values are 0 - 255
8 MATRIX.brightness(10);
11void loop() {
13 for (int i = 0; i <= 255; i++) {
14 MATRIX.beginDraw();
15 MATRIX.fill(i, 0, 0);
16 MATRIX.rect(0, 0, MATRIX.width(), MATRIX.height());
17 MATRIX.endDraw();
18 delay(10);
19 }
21 for (int i = 255; i >= 0; i--) {
22 MATRIX.beginDraw();
23 MATRIX.fill(i, 0, 0);
24 MATRIX.rect(0, 0, MATRIX.width(), MATRIX.height());
25 MATRIX.endDraw();
26 delay(10);
27 }

Testing It Out

If everything is successful, after uploading the code, the MKR RGB Shield should now slowly fade in a red color. When the color is at its brightest (255), the program exits the

loop, and enters another one, which is designed to decrease the value of
, by using
instead of

Different levels of brightness on the LEDs.
Different levels of brightness on the LEDs.

When the second

loop comes to an end (when it reaches 0), it goes back to the initial
loop, and increases it again. As a result, the program will be fading in and out running, as long as its running.


If the code is not working, there are some common issues we can troubleshoot:

  • You have not mounted the MKR RGB Shield on top of an Arduino MKR board.
  • You have not installed the Arduino_MKRRGB and ArduinoGraphics library.


In this tutorial, we have used a popular fading method together with the MKR RGB Shield and the help of

loops. There are several other cool ways of using the
loop in this scenario, such as fading from one color to the other.

Feel free to explore the Arduino_MKRRGB and ArduinoGraphics libraries further, and try out some of the many cool functions.

Suggest changes

The content on is facilitated through a public GitHub repository. If you see anything wrong, you can edit this page here.


The Arduino documentation is licensed under the Creative Commons Attribution-Share Alike 4.0 license.