# Effects
# Box Shadow
These values correspond to Elevations.
Class | Properties |
|---|---|
| * | --tw-shadow: 0 0 #0000; |
| shadow-0 | --tw-shadow: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-1 | --tw-shadow: 0px 0px 2px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 1px 3px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-2 | --tw-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 3px 4px rgba(0, 0, 0, 0.02), 0px 1px 5px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-3 | --tw-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06), 0px 3px 4px rgba(0, 0, 0, 0.04), 0px 1px 8px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-4 | --tw-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 5px rgba(0, 0, 0, 0.04), 0px 1px 10px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-6 | --tw-shadow: 0px 6px 10px rgba(0, 0, 0, 0.06), 0px 1px 18px rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-8 | --tw-shadow: 0px 8px 10px rgba(0, 0, 0, 0.06), 0px 3px 14px rgba(0, 0, 0, 0.04), 0px 4px 5px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-9 | --tw-shadow: 0px 9px 12px rgba(0, 0, 0, 0.06), 0px 3px 16px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-12 | --tw-shadow: 0px 12px 17px rgba(0, 0, 0, 0.04), 0px 5px 22px rgba(0, 0, 0, 0.02), 0px 7px 8px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-16 | --tw-shadow: 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 6px 30px rgba(0, 0, 0, 0.02), 0px 8px 10px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| shadow-24 | --tw-shadow: 0px 24px 38px rgba(0, 0, 0, 0.04), 0px 9px 46px rgba(0, 0, 0, 0.02), 0px 11px 15px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
# Opacity
Class | Properties |
|---|---|
| opacity-0 | opacity: 0; |
| opacity-5 | opacity: 0.05; |
| opacity-10 | opacity: 0.1; |
| opacity-20 | opacity: 0.2; |
| opacity-25 | opacity: 0.25; |
| opacity-30 | opacity: 0.3; |
| opacity-40 | opacity: 0.4; |
| opacity-50 | opacity: 0.5; |
| opacity-60 | opacity: 0.6; |
| opacity-70 | opacity: 0.7; |
| opacity-75 | opacity: 0.75; |
| opacity-80 | opacity: 0.8; |
| opacity-90 | opacity: 0.9; |
| opacity-95 | opacity: 0.95; |
| opacity-100 | opacity: 1; |
# Mix Blend Mode
Class | Properties |
|---|---|
| mix-blend-normal | mix-blend-mode: normal; |
| mix-blend-multiply | mix-blend-mode: multiply; |
| mix-blend-screen | mix-blend-mode: screen; |
| mix-blend-overlay | mix-blend-mode: overlay; |
| mix-blend-darken | mix-blend-mode: darken; |
| mix-blend-lighten | mix-blend-mode: lighten; |
| mix-blend-color-dodge | mix-blend-mode: color-dodge; |
| mix-blend-color-burn | mix-blend-mode: color-burn; |
| mix-blend-hard-light | mix-blend-mode: hard-light; |
| mix-blend-soft-light | mix-blend-mode: soft-light; |
| mix-blend-difference | mix-blend-mode: difference; |
| mix-blend-exclusion | mix-blend-mode: exclusion; |
| mix-blend-hue | mix-blend-mode: hue; |
| mix-blend-saturation | mix-blend-mode: saturation; |
| mix-blend-color | mix-blend-mode: color; |
| mix-blend-luminosity | mix-blend-mode: luminosity; |
# Background Blend Mode
Class | Properties |
|---|---|
| bg-blend-normal | background-blend-mode: normal; |
| bg-blend-multiply | background-blend-mode: multiply; |
| bg-blend-screen | background-blend-mode: screen; |
| bg-blend-overlay | background-blend-mode: overlay; |
| bg-blend-darken | background-blend-mode: darken; |
| bg-blend-lighten | background-blend-mode: lighten; |
| bg-blend-color-dodge | background-blend-mode: color-dodge; |
| bg-blend-color-burn | background-blend-mode: color-burn; |
| bg-blend-hard-light | background-blend-mode: hard-light; |
| bg-blend-soft-light | background-blend-mode: soft-light; |
| bg-blend-difference | background-blend-mode: difference; |
| bg-blend-exclusion | background-blend-mode: exclusion; |
| bg-blend-hue | background-blend-mode: hue; |
| bg-blend-saturation | background-blend-mode: saturation; |
| bg-blend-color | background-blend-mode: color; |
| bg-blend-luminosity | background-blend-mode: luminosity; |