.container { width: 800px; height: 750px; margin: 100px auto 0 auto; border: 1px solid black; overflow: scroll; /* background-color: rgba(47, 59, 43, 0.3); background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; background-size: contain; background-position: center; background-blend-mode: overlay; background-attachment:fixed; */ background: url("bg.jpg") rgba(47, 59, 43, 0.3) no-repeat; background-size: cover; } p { font-size: 36px; color: rgb(0, 0, 0); } .title:hover::before { content: "‼️ "; } .title:hover::after { content: " ⚡"; } .box-grad { width: 450px; height: 450px; margin: 100px auto 0 auto; border: 1px solid black; color: white; font-size: 36px; /* background-image: linear-gradient(to top, rgb(121, 69, 69), blue, green, white, black) */ /* background-image: linear-gradient(13deg, yellow 15%, pink 25%, blue) */ /* background-image: linear-gradient(13deg, yellow 15%, green 15%, green 40%, red 40%, red 50%, pink); */ /* background-image: radial-gradient( circle at bottom, yellow, green, red ); background-image: radial-gradient( ellipse at right, rgb(0, 255, 213), rgb(18, 7, 7), red ); */ /* background-image: radial-gradient( circle at bottom, yellow 15%, yellow 30%, green 30%, green 60%, red 60% ); */ /* background: repeating-linear-gradient( 45deg, rgb(194, 108, 108), rgb(194, 108, 108)10px, rgb(109, 109, 208) 10px, rgb(109, 109, 208) 20px ); */ background: repeating-radial-gradient( circle at center, rgb(148, 16, 236), rgb(148, 16, 236) 10px, rgb(98, 225, 24) 10px, rgb(98, 225, 24) 20px ); }