How to draw a diagonal fade-in and fade-out?

Question

How to draw a diagonal fade-in/fade-out in 2D using MonoGame draw API?

For a simple (non-directional) fade-in/out drawing the background with alpha variation do the tricks, but what is the standard way to fade-in/fade-out directionally in 2D?

(The background is a texture, not a unicolored background)

Answer 1

Creating an horizontal or vertical gradient is very simple. Anything else is going to be a little more complicated.

If you are looking to strictly create an horizontal or vertical gradient, you can do it as follows. This will create a RenderTarget for a horizontal gradient:

//create a blank 1x1 white texture
Texture2D BlankTexture = new Texture2D(GraphicsDevice, 1, 1, false, SurfaceFormat.Color);
Color[] color = new Color[1];
color[0] = Color.White;
BlankTexture.SetData(color);

//Set gradient colors
Color ColorA = Color.Blue;
Color ColorB = Color.Red;

//Create a rendertarget for horizontal gradient
Render = new RenderTarget2D(GraphicsDevice, 1, GraphicsDevice.Viewport.Height);

//Draw horizontal gradient
GraphicsDevice.SetRenderTarget(Render);
SpriteBatch.Begin();

for (int i = 0; i < Render.Height; i++)
    SpriteBatch.Draw(BlankTexture, new Rectangle(0, i, GraphicsDevice.Viewport.Width, 1), Color.Lerp(ColorA, ColorB, i / (float)Render.Height));

SpriteBatch.End();
GraphicsDevice.SetRenderTarget(null);

Then you can draw this across your screen, by stretching it along your viewport to create a smooth gradient effect:

SpriteBatch.Begin();
SpriteBatch.Draw(Render, new Rectangle(0, 0, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height), Color.White);
SpriteBatch.End();