<section class="poster-1">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >

        <defs>
          <filter id="filtered-1">
            <!-- COLORS -->
            <feFlood flood-color="#551C0B" result="COLOR-outline" />
            <!-- COLORS END -->

            <!-- OUTLINE -->
            <feMorphology in="SourceAlpha" operator="dilate" radius="5" result="OUTLINE_10" />
            <feComposite in="COLOR-outline" operator="in" in2="OUTLINE_10" result="OUTLINE_20" />
            <!-- OUTLINE END -->

            <!-- LIGHTING EFFECTS -->
            <feGaussianBlur stdDeviation="8" in="SourceAlpha" result="LIGHTING-EFFECTS-10"/>
            <feSpecularLighting surfaceScale="9" specularConstant="0.9" specularExponent="10" lighting-color="#blue" in="LIGHTING-EFFECTS-10" result="LIGHTING-EFFECTS-20">
              <fePointLight x="-100" y="-200" z="100" />
            </feSpecularLighting>
            <feComposite operator="in" in="LIGHTING-EFFECTS-20" in2="SourceAlpha" result="LIGHTING-EFFECTS-30"/>
            <feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS-30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS-40"/>
            <!-- LIGHTING EFFECTS END-->

            <!-- COLOR EFFECTS -->
            <feComponentTransfer in="LIGHTING-EFFECTS-40" result="COLOR-EFFECTS_10">
              <feFuncR id="RedT" type="table" tableValues="0 6 1 0 3"/>
              <feFuncG id="GrnT" type="table" tableValues="2 0 1 3 2"/>
              <feFuncB id="BluT" type="table" tableValues="1 -1 0 1 1"/>
            </feComponentTransfer>

            <feColorMatrix type="matrix"
            values="0.6 0.2 0 -0.3 0,
            -0.5 1 0 -0.1 0,
            -0.4 0.5 0.7 0 0,
            0 0 0 1 0" in="COLOR-EFFECTS_10" result="COLOR-EFFECTS_20" />
            <!-- COLOR EFFECTS END-->

            <feMerge>
              <feMergeNode in="OUTLINE_20" />
              <feMergeNode in="COLOR-EFFECTS_20"/>
            </feMerge>
          </filter>
        </defs>
        <text class="filtered-1" x="20" y="140">BLOP!</text>
      </svg>
    </section>

    <section class="poster-2">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >

        <defs>
          <filter id="filtered-2" >

            <!-- COLORS -->
            <feFlood flood-color="#551C0B" result="COLOR-outline" />
            <!-- COLORS END-->

            <!-- OUTLINE -->
            <feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10" />
            <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20" />
            <!-- OUTLINE END -->

            <!-- LIGHTING EFFECTS -->
            <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"/>
            <feSpecularLighting surfaceScale="5" specularConstant="0.8" specularExponent="7.5" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
              <fePointLight x="-250" y="-50" z="300" />
            </feSpecularLighting>
            <feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30"/>
            <feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS_30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS_40"/>
            <!-- LIGHTING EFFECTS END -->

            <!-- COLOR EFFECTS -->
            <feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
              <feFuncR type="gamma" offset="-0.3" amplitude="1.1" exponent="4.84"/>
              <feFuncG type="gamma" offset="-0.3" amplitude="3.1" exponent="4.84"/>
              <feFuncB type="gamma" offset="13.3" amplitude="0.1" exponent="1.84"/>
            </feComponentTransfer>
            <!-- COLOR EFFECTS END -->

            <feMerge>
              <feMergeNode in="OUTLINE_20" />
              <feMergeNode in="COLOR-EFFECTS_10"/>
            </feMerge>
          </filter>
        </defs>
        <text class="filtered-2" x="20" y="140">BLOP!</text>
      </svg>
    </section>


    <section class="poster-3">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >

        <defs>
          <filter id="filtered-3" height="220%">
            <!-- COLORS -->
            <feFlood flood-color="#551C0B" result="COLOR-outline" />
            <!-- COLORS END-->

            <!-- OUTLINE -->
            <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="OUTLINE_10" />
            <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10"  result="OUTLINE_20" />
            <!-- OUTLINE END -->

            <!-- LIGHTING EFFECTS -->
            <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"/>
            <feSpecularLighting surfaceScale="5" specularConstant="0.5" specularExponent="7.5" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
            <fePointLight x="750" y="-50" z="300" />
            </feSpecularLighting>
            <feComposite in2="SourceAlpha" operator="in" in="LIGHTING-EFFECTS_20" result="LIGHTING-EFFECTS_30"/>
            <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40"/>
            <!-- LIGHTING EFFECTS END -->

            <!-- COLOR EFFECTS -->
            <feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
              <feFuncR type="gamma" offset="-1.3" amplitude="10" exponent="4.84"/>
              <feFuncB type="gamma" offset="-1.3" amplitude="10.1" exponent="40.84"/>
            </feComponentTransfer>
            <!-- COLOR EFFECTS END -->

            <feMerge>
              <feMergeNode in="OUTLINE_20" />
              <feMergeNode in="COLOR-EFFECTS_10"/>
            </feMerge>
          </filter>
        </defs>
        <text class="filtered-3" x="20" y="140">BLOP!</text>
      </svg>
    </section>

    <section class="poster-4">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180">
        <defs>

          <filter id="filtered-4" height="220%">

            <!-- COLORS -->
            <feFlood flood-color="#551C0B" result="COLOR-outline" />
            <feFlood flood-color="#551C0B" flood-opacity="0" result="TRANSPARENT" />
            <!-- COLORS END-->

            <!-- OUTLINE -->
            <feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10" />
            <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20" />
            <!-- OUTLINE END-->

            <!-- LIGHTING EFFECTS -->
            <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10" />
            <feSpecularLighting surfaceScale="7" specularConstant="0.8" specularExponent="7" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
              <fePointLight x="-100" y="-150" z="200" />
            </feSpecularLighting>
            <feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30" />
            <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40" />
            <!-- LIGHTING EFFECTS END-->

            <!-- COLOR EFFECTS -->
            <feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
              <feFuncR id="RedT" type="table" tableValues="13 6 1 0 3"></fefuncr>
              <feFuncG id="GrnT" type="table" tableValues="2 0 0 1"></fefuncg>
              <feFuncB id="BluT" type="table" tableValues="1 0 0 -8"></fefuncb>
            </feComponentTransfer>
            <!-- COLOR EFFECTS END-->

            <femerge>
              <feMergeNode in="OUTLINE_20" />
              <feMergeNode in="COLOR-EFFECTS_10" />
              <feMergeNode in="TRANSPARENT" />
            </femerge>
          </filter>


        </defs>
        <text class="filtered-4" x="20" y="140">BLOP!</text>
      </svg>
    </section>
@import "https://fonts.googleapis.com/css?family=Sniglet:800";

$bg-path: "https://www.w3cplus.com/sites/default/files/blogs/2015/1506/" !default;

html,
body{
  height: 100vh;
  width: 100vw;
}
body{
  background: white;
}
svg{
  display: block;
  position: absolute;
  width:100%;
  max-width: 500px;
  max-height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-size: cover;
}

.filtered-1, 
.filtered-2, 
.filtered-3, 
.filtered-4{
  font: 800 140px/1 'Sniglet', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 140px;
}
.filtered-1{
  filter: url(#filtered-1);
  color: #0040FF;
  fill: #0040FF;
}
.filtered-2{
  filter: url(#filtered-2);
  color: #EF7349;
  fill: #EF7349;
 }
.filtered-3{
  filter: url(#filtered-3);
  color: #EF7349;
  fill: #EF7349;;
 }
.filtered-4{
  filter: url(#filtered-4);
  color: #FA0D5D;
  fill: #FA0D5D;
}
.poster-1, 
.poster-2,
.poster-3,
.poster-4{
  position: relative;
  float: left;
  width: 50vw;
  height: 50vh;
  background: #D9A300 url(#{$bg-path}drops.jpg) center center;
  overflow: hidden;
  background-size: cover;
}
.poster-2{
  background: #56B597 url(#{$bg-path}orange.jpg) center center;
}
.poster-3{
  background: #0085B2 url(#{$bg-path}water.jpg) center center;
}
.poster-4{
  background: #FF7A4D url(#{$bg-path}jelly.jpg) center center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.