background

UI for Blazor

Blazor ColorGradient

  • Use the Blazor ColorGradient to customize colors through gradient canvases, hue and alpha sliders and editors.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor ColorGradient - Header
  • Customize Color Content with Blazor ColorGradient

    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 for ASP.NET Core 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.  

    Keyboard navigation
  • Theming

    The Telerik UI for Blazor ColorGradient comes with four built-in themes and a variety of swatches, including Default (Main Dark, Nordic, Purple), Material (Arctic, Lime Dark, Nova), Bootstrap (Urban, Vintage, etc.) and Fluent. 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
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor ColorGradient of component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    Blazor RTL Support

All Blazor Components

Next Steps