Rainbow Frame Box Shadow

Rainbow colors look fantastic and throw a magical effect on UI. The Rainbow frame box-shadow is stunning with multiple layers.

Box Shadow Properties

Horizontal

Vertical

Blur

Spread

Inset

Color

Shadow 0

Shadow 1

Shadow 2

Shadow 3

Shadow 4

Shadow 5

Shadow 6

Shadow 7

Shadow 8

Shadow 9

Shadow 10

Shadow 11

Shadow 12

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 2px rgba(148,0,211,1),
15px -15px 0px -2px rgba(255,255,255,1),
15px -15px 0px 0px rgba(75,0,130,1),
30px -30px 0px -2px rgba(255,255,255,1),
30px -30px 0px 0px rgba(0,0,255,1),
45px -45px 0px -2px rgba(255,255,255,1),
45px -45px 0px 0px rgba(0,255,0,1),
60px -60px 0px -2px rgba(255,255,255,1),
60px -60px 0px 0px rgba(255,255,0,1),
75px -75px 0px -2px rgba(255,255,255,1),
75px -75px 0px 0px rgba(255,127,0,1),
90px -90px 0px -2px rgba(255,255,255,1),
90px -90px 0px 0px 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 2px rgba(148,0,211,1),
15px -15px 0px -2px rgba(255,255,255,1),
15px -15px 0px 0px rgba(75,0,130,1),
30px -30px 0px -2px rgba(255,255,255,1),
30px -30px 0px 0px rgba(0,0,255,1),
45px -45px 0px -2px rgba(255,255,255,1),
45px -45px 0px 0px rgba(0,255,0,1),
60px -60px 0px -2px rgba(255,255,255,1),
60px -60px 0px 0px rgba(255,255,0,1),
75px -75px 0px -2px rgba(255,255,255,1),
75px -75px 0px 0px rgba(255,127,0,1),
90px -90px 0px -2px rgba(255,255,255,1),
90px -90px 0px 0px rgba(255,0,0,1);
  }

Box Shadow Property Tips

Experimenting with multiple layers and depth will lead you to phenomenal results of box shadow.