# Bunifu Gradient Panel

&#x20;The Bunifu Gradient Panel control is designed to blend-in the beauty of colors into the appearance of your interfaces by applying various gradient-color-mixes. Those beautifully-aligned gradients you often see on the Internet can easily be mimicked with Bunifu's Gradient Panel. You can add gradients at design-time or runtime.

Here's a quick preview of the Gradient Panel and some sample illustrations:\
(The GIF previews may not be as clear but illustrate the features)

![](https://downloads.intercomcdn.com/i/o/99206715/a9f30137fb3641d4e4d2c05b/bunifu-gradient-panel-preview-03.gif)

![](https://downloads.intercomcdn.com/i/o/98966313/593aacdc1f682e74f548f1dd/bunifu-gradient-panel-inspirational-ui.png)

![](https://downloads.intercomcdn.com/i/o/98964944/437eb291567a9649e1764095/bunifu-gradient-panel-preview-01.gif)

## **Adding a Bunifu Gradient Panel on a Form at Design-time**

Simply locate Bunifu Gradient Panel in your toolbox and drag it to your form. After that we shall customize using custom properties as it will be elaborated later in this article.&#x20;

![](https://downloads.intercomcdn.com/i/o/72838543/a7dc66c9af35e8c537ac7a5e/5-1\[1].png)

![](https://downloads.intercomcdn.com/i/o/99189309/a041245b25180e383fcef455/01.png)

## **Adding Bunifu Gradient Panel on a Form via Code**

Adding Bunifu Gradient panel at run-time is easy. We will link the Load event to our form by double-clicking on it and add the following code

{% tabs %}
{% tab title="C#" %}

```
var panel = new Bunifu.Framework.UI.BunifuGradientPanel();
panel.Location = new Point(20, 20);
panel.Size = new Size(200, 200);this.Controls.Add(panel);
```

{% endtab %}

{% tab title="VB.NET" %}

```
Dim panel As New Bunifu.Framework.UI.BunifuGradientPanel
panel.Location = New Point(20, 20)
panel.Size = New Size(200, 200)Controls.Add(panel)
```

{% endtab %}
{% endtabs %}

Because we're creating a new Bunifu Gradient Panel control via code, we will need to set its `Location`  and `Size` before adding it to our Form.

Here's an illustration of the above process in action:<br>

![](https://downloads.intercomcdn.com/i/o/99190226/93dad255e98d348047b9d548/bunifu-gradient-panel-preview-02.gif)

## Properties

### **`GradientBottomLeft`**

This property allows you to set the bottom-left gradient color of our panel.

### **`GradientBottomRight`**

This property allows you to set the bottom-right gradient color of our panel.

### &#x20;**`GradientTopLeft`**

This property allows you to set the top-left gradient color of our panel.

### **`GradientTopRight`**

This property allows you to set the top-right gradient color of our panel.

{% hint style="info" %}
These properties can also be set at design-time from the Properties window by simply selecting our Gradient Panel and scrolling down the Properties window.&#x20;
{% endhint %}

![](https://downloads.intercomcdn.com/i/o/72840206/ba1a4555faea11f4666003d0/7-1\[1].png)

{% hint style="info" %}
The default color for the properties is white and by setting colors you simply achieve nice backgrounds instantly as shown below.
{% endhint %}

![](https://downloads.intercomcdn.com/i/o/72840539/e40cce8d3bc55b7d6bc73b1f/Screenshot_2\[1].png)

![](https://downloads.intercomcdn.com/i/o/72840611/febce45be1e3bd2fe53d900d/Screenshot_1\[1].png)

### **`Quality`**

&#x20;This property allow you to set the quality or richness of the gradient. In this example we have set the quality to 10.

![](https://downloads.intercomcdn.com/i/o/72840979/db5cfeb092c1de71656f9625/Screenshot_1\[1].png)

That's it!

We hope you will enjoy using Bunifu Gradient Panel control and that it will help you create better user experience for your users.&#x20;

Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs2.bunifuframework.com/docs/ui/controls/bunifu-gradient-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
