Effects | Fast Flow Kit

Effects

The sub-sections "2D & 3D transform", "Transitions" and "Filters" are not there because they cover several states and variables at once.

Opacity

Class Name

Value

Class Object

opacity-0

Opacity: 0

👉

opacity-25

Opacity: 25

👉

opacity-50

Opacity: 50

👉

opacity-75

Opacity: 75

👉

opacity-100

Opacity: 100

👉

Box shadows

Class Name

Value

Class Object

shadow-none

Shadow: None

👉

shadow-xs

Shadow: Type: Outside | Angle: 90 | Distance: 0px | Blur: 0px | Size: 1px | Color: Black 5%

👉

shadow-sm

Shadow: Type: Outside | Angle: 180 | Distance: 1px | Blur: 2px | Size: 0px | Color: Black 5%

👉

shadow

Shadow: Type: Outside | Angle: 180 | Distance: 1px | Blur: 3px | Size: 0px | Color: Black 10%

👉

shadow-md

Shadow: Type: Outside | Angle: 180 | Distance: 4px | Blur: 6px | Size: -1px | Color: Black 10%

👉

shadow-lg

Shadow: Type: Outside | Angle: 180 | Distance: 10px | Blur: 15px | Size: -3px | Color: Black 10%

👉

shadow-xl

Shadow: Type: Outside | Angle: 180 | Distance: 20px | Blur: 25px | Size: -5px | Color: Black 10%

👉

shadow-2xl

Shadow: Type: Outside | Angle: 180 | Distance: 25px | Blur: 50px | Size: -12px | Color: Black 25%

👉

shadow-inner-xs

Shadow: Type: Inside | Angle: 90 | Distance: 0px | Blur: 0px | Size: 1px | Color: Black 5%

👉

shadow-inner-sm

Shadow: Type: Inside | Angle: 180 | Distance: 1px | Blur: 2px | Size: 0px | Color: Black 5%

👉

shadow-inner

Shadow: Type: Inside | Angle: 180 | Distance: 1px | Blur: 3px | Size: 0px | Color: Black 10%

👉

shadow-inner-md

Shadow: Type: Inside | Angle: 180 | Distance: 4px | Blur: 6px | Size: -1px | Color: Black 10%

👉

Cursor

Class Name

Value

Class Object

cursor-auto

Cursor: Auto

👉

cursor-default

Cursor: Default

👉

cursor-none

Cursor: None

👉

cursor-pointer

Cursor: Pointer

👉

cursor-not-allowed

Cursor: Not Allowed

👉

cursor-wait

Cursor: Wait

👉

cursor-progress

Cursor: Progress

👉

cursor-help

Cursor: Help

👉

cursor-context-menu

Cursor: Context Menu

👉

cursor-cell

Cursor: Cell

👉

cursor-crosshair

Cursor: Crosshair

👉

cursor-text

Cursor: Text

👉

cursor-vertical-text

Cursor: Vertical Text

👉

cursor-grab

Cursor: Grab

👉

cursor-grabbing

Cursor: Grabbing

👉

cursor-alias

Cursor: Alias

👉

cursor-copy

Cursor: Copy

👉

cursor-move

Cursor: Move

👉

cursor-zoom-in

Cursor: Zoom in

👉

cursor-zoom-out

Cursor: Zoom out

👉

cursor-col-resize

Cursor: Col Resize

👉

cursor-row-resize

Cursor: Row Resize

👉

cursor-nesw-resize

Cursor: Nesw Resize

👉

cursor-nwse-resize

Cursor: Nwse Resize

👉

cursor-ew-resize

Cursor: Ew Resize

👉

cursor-ns-resize

Cursor: Ns Resize

👉

cursor-n-resize

Cursor: N Resize

👉

cursor-w-resize

Cursor: W Resize

👉

cursor-s-resize

Cursor: S Resize

👉

cursor-e-resize

Cursor: E Resize

👉

cursor-nw-resize

Cursor: Nw Resize

👉

cursor-ne-resize

Cursor: Ne Resize

👉

cursor-sw-resize

Cursor: Sw Resize

👉

cursor-se-resize

Cursor: Se Resize

👉