<div class="effect-grain">
  <div class="background effect-blurry"></div>
<div class="colors-container">
  <div class="color color-1"></div>
  <div class="color color-2"></div>
  <div class="color color-3"></div>
  <div class="color color-4"></div>
  <div class="color color-5"></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter style="color-interpolation-filters:sRGB;" id="grain">
      <feTurbulence type="fractalNoise" numOctaves="10" baseFrequency="0.25" seed="10" result="result0" />
      <feColorMatrix result="result4" values="0" type="saturate" />
      <feComposite in="SourceGraphic" in2="result4" operator="arithmetic" k1="0" k2="0.5" k3="0.1" result="result2" />
      <feBlend result="result5" mode="normal" in="result2" in2="SourceGraphic" />

    <filter style="color-interpolation-filters:sRGB;" id="paper">
      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="0" result="result4" id="feTurbulence4160" scale="4" />
      <feDisplacementMap in="SourceGraphic" in2="result4" yChannelSelector="G" xChannelSelector="R" scale="1" result="result3" id="feDisplacementMap4162" />
      <feDiffuseLighting lighting-color="rgb(233,230,215)" diffuseConstant="1" surfaceScale="0.2" result="result1" in="result4" id="feDiffuseLighting4164">
        <feDistantLight azimuth="235" elevation="40" id="feDistantLight4166" />
      <feComposite operator="in" in="result3" in2="result1" result="result2" id="feComposite4168" />
      <feComposite in2="result1" result="result5" operator="arithmetic" k1="1.7" id="feComposite4170" />
      <feBlend in="result5" in2="result3" mode="normal" id="feBlend4172" />
@dark-blue : #4F7F8F;
@light-blue : #96D5EB;
@blue : #57A3BD;
@dark-sand : #DBCEC1;
@sand : #F7F6F5;

@color1 : @sand;
@color2 : @dark-sand;
@color3 : @light-blue;
@color4 : @dark-blue;
@color5 : @blue;

// height of the pallette
@h : 70vh;

// bqckgroudn blur qmount
@blur: 50px;

body {
  background-color: black;
  overflow: hidden;

.background {
  position: absolute;
  top: -@blur;
  bottom: -@blur;
  left: -@blur;
  right: -@blur;
  z-index: 0;
  background: linear-gradient(to bottom, @color1 20%, @color2 30%, @color3 40%, @color4 50%, @color5 60%);  

.effect-blurry {
  -webkit-filter: blur(@blur);
  filter: blur(@blur);

  -webkit-filter: url(#grain);
  filter: url(#grain);

  -webkit-filter: url(#paper);
  filter: url(#paper);

.colors-container {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: @h;
  width: calc(0.8 * @h);

  background-color: black;
  box-shadow: 10px 30px 100px 0px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;

.color {
  width: 100%;
  flex-grow: 1;
.color-1 {
  background-color: @color1;
  flex-grow: 3;
.color-2 {
  background-color: @color2;
.color-3 {
  background-color: @color3;
.color-4 {
  background-color: @color4;
.color-5 {
  background-color: @color5;
  flex-grow: 8;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.