Rainbow Box Shadow

Rainbow box shadows look unique and fabulous. Creative use of layers and colors ends up in fantastic shades.

Box Shadow Properties

Horizontal

Vertical

Blur

Spread

Inset

Color

Shadow 0

Shadow 1

Shadow 2

Shadow 3

Shadow 4

Shadow 5

Shadow 6

Box Shadow

Presets

All Bootstrap Colorful Directional Fluent UI Inset Layered Material Design Primer Tailwind CSS Trendy UI

Element Properties

Width

Height

Radius

Color

Box Shadow CSS

box-shadow: 0px 0px 0px 3px rgba(148,0,211,1),
0px 0px 0px 6px rgba(75,0,130,1),
0px 0px 0px 9px rgba(0,0,255,1),
0px 0px 0px 12px rgba(0,255,0,1),
0px 0px 0px 15px rgba(255,255,0,1),
0px 0px 0px 18px rgba(255,127,0,1),
0px 0px 0px 21px rgba(255,0,0,1);

Element CSS

.element {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    color: #000;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 3px rgba(148,0,211,1),
0px 0px 0px 6px rgba(75,0,130,1),
0px 0px 0px 9px rgba(0,0,255,1),
0px 0px 0px 12px rgba(0,255,0,1),
0px 0px 0px 15px rgba(255,255,0,1),
0px 0px 0px 18px rgba(255,127,0,1),
0px 0px 0px 21px rgba(255,0,0,1);
  }

Box Shadow Property Tips

Using multiple layers, imaginative depth and sharp colors will generate a masterpiece of rainbow box-shadow.