×

Effects

Argon CSS offers utilities for effects like box-shadow and opacity.

Examples

shadow
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
opacity-10
opacity-20
opacity-30
opacity-40
opacity-50
opacity-60
opacity-70
opacity-80
opacity-90
opacity-100
Class
Properties
shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);