Soft 3
A wider ambient shadow that stays restrained.
subtlesoftambient
Hexpedia#111827
CSS Generator
Box Shadow Generator
Design layered shadows with linked sliders, editable values, color controls, inset mode, randomization, and shareable permalinks.
box-shadow
Preview Surface
Controls
Stack up to 6 shadow layers.
Layer 1
HEX #27bfadRGB 39, 191, 173HSL 173, 66%, 45%
Output
Copy-ready CSS
Pure CSS
box-shadow: 0px 18px 45px -18px rgba(39, 191, 173, 0.36);Tailwind v4
shadow-[0px_18px_45px_-18px_rgb(39_191_173_/_0.36)]Hexpedia
Color reference
Look up the default shadow color in Hexpedia before tuning opacity, blur, and spread.
Presets
Popular Box Shadow Presets
Start from a refined shadow, then open the preset page for copy output and related styles.
Paper 2
A layered paper effect for document-style cards.
subtlepaperlayered
Hexpedia#111827
Elevation 4
A medium material shadow for layered panels.
materialelevationpanel
Hexpedia#000000
Elevation 12
A high elevation for command palettes.
materialelevationcommand
Hexpedia#000000
Dark Neuro Soft
A dark neumorphic shadow with restrained contrast.
neumorphismdarksoft
Neon Blue
A saturated cyan-blue glow for dark interfaces.
glowneonblue
Neon Pink
A hot pink glow for expressive highlights.
glowneonpink
Soft Glow
A quiet colored halo for callouts and badges.
glowsoftcolored
Layered Card
A multi-layer card shadow with clear ambient depth.
layeredcardambient
Hexpedia#0f172a
Solid Offset
A hard offset shadow with poster-like contrast.
hardbrutalistoffset
Hexpedia#000000
Warm Shadow
A warm tinted shadow for cream or coral surfaces.
coloredwarmorange
Inner Glow
A colored inset glow for selected controls.
insetglowselected
Hexpedia#38bdf8
More tools