Add the Bevel effect to any image. We will create a generalized transformation URL, which could be used to apply the bevel effect to any image. In order to do this, we'll make use of variables, overlays, the colorize effect, the cut-out effect, and more. Here is the final result -

Before we start - We will make use of the following image during this tutorial, and therefore, it should be uploaded to Cloudinary in advance.
We've set its public ID to triangle -

Let's begin! As a first step, we'll define some variables that we will use multiple times throughout the transformation (You can find more information about using variables here). The first one is the bevel width we'd like to apply, which we named bw, and assign it a value of 20px. In addition, we have set the img variable to be the public ID of the image we're manipulating (the base image - current:public_id) - $img_current:public_id,$bw_20. In this step, we've initialized the variables and prepared the grounds for the transformation, and it has no apparent effect on the image.

Next, we'll create the four bevels - one for each of the image edges. Each bevel is essentially made of a crop of the relevant edge of the image, with the width of bw, and the length of the edge. In addition, we'll colorize the bevel in order to give it a sense of 3D depth. Additional details regarding the colorize effect can be found here.

Let's start with the top edge and the bottom one.

Top and bottom

The top bevel is placed on the north side of the image (g_north) and we have colorized it to white, with a color strength of 30 - l_$img,c_crop,w_w,h_$bw,g_north,e_colorize:30,co_white/fl_layer_apply,g_north

A few words about the above transformation -

1. You can notice the usage of the layer_apply flag, which clearly defines where a layer definition ends. This will become crucial in the left and right bevels, where we'll apply nested layers. You can read more about this flag here.
2. The first occurrence of g_north is in charge of cropping the top edge when creating the layer, while the second occurrence of it (within the layer_apply section) is in charge of placing the layer at the top of the image.
3. Notice that we want to crop the entire top edge, therefore, we chose to crop the full width of the image - w_w, and a hight of the bevel width - h_$bw.

The bottom bevel is placed on the south side of the image (g_south) and we have colorized it to black, with a strength of 50 - l_$img,c_crop,w_w,h_$bw,g_south,e_colorize:50,co_black/fl_layer_apply,g_south

Left and right

Since both the left and the right bevels are created in the same manner, we'll focus on the left bevel. Let's begin by adding the bevel, the same way it is done in the top and bottom bevels - l_$img,c_crop,h_h,w_$bw,g_west,e_colorize:15,co_white/fl_layer_apply,g_west

The cut-out effect, which we'll use next, is given a template image, and it trims the underlying layer wherever opaque pixels of the template are present (you can read more about the effect here). We'll make use of the cut-out effect, with the help of the triangle image as a template, in order to diagonally trim the top part of the layer. We'll do this by nesting a layer inside of the left bevel layer - l_$img,c_crop,h_h,w_$bw,g_west,e_colorize:15,co_white/l_triangle,w_$bw,a_-90/e_cut_out,fl_layer_apply,g_north_west/fl_layer_apply,g_west

Notice, that we rotated the triangle image (a_-90) in order to cut out the desired part of the layer.
Below is a zoom of the top left corner, which demonstrates the effect of the above two steps -

We will now use the cut-out effect in order to trim the bottom part of the layer -

The right bevel is created in the same manner as the left one, with the bevel being added to the right edge, and trimmed with the cut-out effect at the top and the bottom -

Done! We now have the bevel effect applied. You can finetune it as you'd like -

• Change the bevel width by assigning different values to the bw variable.
• Change the "light" direction, by changing the strengths of the colorize effect.
• Since we used variables, and generalized the transformation, you could apply the exact same transformation to other images, by simply replacing the public ID.

For example -