/ Background Patterns

CSS Pattern With CSS Blend Mode

CSS Pattern With CSS Blend Mode

CSS Pattern With CSS Blend Mode

Sass pattern mixin with CSS background-blend-mode

Made with

Html
Css

Author

marinda

Css


// pattern mixin
@mixin pattern($bg-primary,$bg-secondary) {
  background:
    repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 1em,
    rgba($bg-secondary,0.4) 0,
    rgba($bg-secondary,0.1) 2em,
    transparent 0,
    transparent 1em,
    rgba($bg-secondary,0.3) 0,
    rgba($bg-secondary,0.2) 4em,
    transparent 0,
    transparent 1em,
    rgba($bg-primary,0.6) 0,
    rgba($bg-primary,0.2) 2em
  ),
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1em,
    rgba($bg-secondary,0.4) 0,
    rgba($bg-secondary,0.1) 2em,
    transparent 0,
    transparent 1em,
    rgba($bg-secondary,0.3) 0,
    rgba($bg-secondary,0.2) 4em,
    transparent 0,
    transparent 1em,
    rgba($bg-primary,0.4) 0,
    rgba($bg-primary,0.1) 2em
  ), #FFF;
  background-blend-mode: multiply;
}

html {
  height: 100%;
  @include pattern(#c0ebfa, #7FD7F5);
}

Demo

See the Pen CSS pattern with CSS blend mode by marinda (@marinda-s) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More