Blazor ColorGradient - Overview

T-shirt Design

  • Overview.razor
  • TShirtDesignTemplate.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The ColorGradient component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor ColorGradient renders an HSV canvas editor for customizing the color and its opacity and value fields for viewing and editing color values in HEX or RGB formats. This is a very easy way to implement a fully functional and precise color picker for your Blazor applications.

The ColorGradient supports the following features:

  • Value: Set the exact color. You can manually set the default value or set it programmatically via two-way binding.
  • Formats: Choose to allow your users to see and edit colors in HEX, RGB or both formats (both are enabled by default).
  • Format: Set the color format that the user sees by default (RGB is default).
  • ValueFormat: Set the color format the applications return in code (RGB is default).
  • Show opacity editor: By default, an opacity will appear. You can decide to disable it.

The demo above is a fully functional Blazor ColorGradient example. Use the vertical sliders on the right side to choose the base color and opacity. Click and drag on the gradient canvas to fine-tune your selection. At the bottom, you can decide to show the color values in HEX or RGBA. The value changes as you manipulate the sliders and color selector. You can also enter the numeric values manually.

Take a look at the “View Source” tab and you can see that it only takes a line of code to instantiate the Blazor ColorGradient component and another to set the default color.

This Blazor ColorGradient Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.