Shadows

Shadow styles and utility CSS classes.

Utility CSS classes link

Use these CSS classes to set box-shadow to an element e.g. class="rz-shadow-2". Each theme has its own shadows assigned. Change the theme to preview them.

Example
Edit Source

.rz-shadow-0

.rz-shadow-1

.rz-shadow-2

.rz-shadow-3

.rz-shadow-4

.rz-shadow-5

.rz-shadow-6

.rz-shadow-7

.rz-shadow-8

.rz-shadow-9

.rz-shadow-10

Custom CSS properties (CSS Variables) link

These are the root theme shadow CSS variables.

You can use CSS variables in styles e.g. style="box-shadow: var(--rz-shadow-2);"

Example
Edit Source

--rz-shadow-0

--rz-shadow-1

--rz-shadow-2

--rz-shadow-3

--rz-shadow-4

--rz-shadow-5

--rz-shadow-6

--rz-shadow-7

--rz-shadow-8

--rz-shadow-9

--rz-shadow-10

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.

Learn More

New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

Download Learn More