Progress Telerik UI for Blazor

Blazor ColorGradient

  • Use the Blazor ColorGradient to customize colors through gradient canvases, hue and alpha sliders and editors for HEX and RGB values. Configure its opacity and formats and take advantage of the built-in keyboard navigation support.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor ColorGradient component allows you to customize color content through a HSVA canvas configurator, which includes a gradient canvas, hue and alpha sliders. You can input colors in the most popular formats, HEX and RGBA. The component is easy to configure, comes with built-in support for keyboard navigation and is compliant with accessibility standards. 
    Telerik UI for Blazor ColorGradient-Overview
  • Choosing Color

    Users can choose the color they want by utilizing the canvas, the sliders or the numeric editors. They can use all three to explore the different options and find the one that best suits their case.   
  • Configuration

    You have full control over the ColorGradient component rendering. You can toggle the opacity slider, include both HEX and RGB formats, just one of them or none. 

    The ColorGradient can be customized through three parameters: 

    • Opacity  
    • Format 
    • Formats (HEX or RGB) 
    Telerik UI for Blazor ColorGradient-RGB-HEX
  • Accessibility

    The ColorGradient component is compliant with WCAG contrast ratio, thus, you can rest assured that it is accessible to all users. 
    Telerik UI Components Accessibility
  • Keyboard Navigation

    The component comes with built-in support for keyboard navigation, allowing users to navigate the canvas, sliders and numeric editors with their keyboard.  

    Telerik UI for ASP.NET Core Keyboard navigation
  • Theming

    The Telerik UI for Blazor ColorGradient comes with three built-in themes and a variety of swatches, including Default (Main Dark, Nordic, Purple), Material (Arctic, Lime Dark, Nova) and Bootstrap (Urban, Vintage, etc.). You can easily customize the available themes with a few lines of CSS or create a new one with the Progress Sass ThemeBuilder application.  
    Telerik UI for Blazor ColorGradient-Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.