Filter Object¶

Description: An Object value for the filter property conjoins the key-value pairs.

ctr('.test', {
  width: 200px
  filter: {
    brightness: 0.4
    contrast: 0.85
    saturate: 0.75
  }
})

.test:
  width: 200px
  filter:
    brightness: 0.4
    contrast: 0.85
    saturate: 0.75

.test {
  width: 200px;
  filter: brightness(0.4) contrast(0.85) saturate(0.75);
}

ctr('.test', {
  width: 200px
  filter: {
    brightness: 0.4
    contrast: 0.85
    saturate: 0.75
  }
})

.test {
  width: 200px;
  filter: brightness(0.4) contrast(0.85) saturate(0.75);
}

.test:
  width: 200px
  filter:
    brightness: 0.4
    contrast: 0.85
    saturate: 0.75

Notes

• Working with filters tends to get a bit unwieldy, and this helper alleviates this regarding readability and workability
• MDN Filter

Preset Usage¶

Description: Predefined filters can be declared with the filter key using the preset value that corresponds to the preset list below. These filters help you look more glamorous than you already are.

ctr('.test', {
  width: 200px
  // filter preset
  filter: 'walden'
})

.test:
  width: 200px
  # filter preset
  filter: walden

.test {
  width: 200px;
  position: relative;
  filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6);
}
.test img {
  z-index: 1;
  width: 100%;
}
.test::before {
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  content: "";
  display: block;
  position: absolute;
  background: #04c;
  pointer-events: none;
  mix-blend-mode: screen;
}
.test::after {
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}

ctr('.test', {
  width: 200px
  // filter preset
  filter: 'walden'
})

.test {
  width: 200px;
  position: relative;
  filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6);
}
.test img {
  z-index: 1;
  width: 100%;
}
.test::before {
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  content: "";
  display: block;
  position: absolute;
  background: #04c;
  pointer-events: none;
  mix-blend-mode: screen;
}
.test::after {
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}

.test:
  width: 200px
  # filter preset
  filter: walden

Notes

• Attribution: CSSgram
• Una, the creator of CSSgram, has also put together a website so that you can see the filters in action: una.im/CSSgram
  • If you’re not familiar with Una and her work your missing out, she’s a CSS superstar and has a fantastic blog that you should read — una.im

Preset List

1977	aden	amaro	brannan	brooklyn
clarendon	gingham	hudson	inkwell	kelvin
lark	lofi	mayfair	moon	nashville
perpetua	reyes	rise	slumber	stinson
toaster	valencia	walden	fadeOutLeft	willow
xpro2

Modify¶

Description: To modify a filter preset use the Object syntax and declare the preset value in the Object along side any modifications.

ctr('.test', {
  width: 200px
  filter: {
    preset: '1977'
    // remove
    brightness: false
    // modify
    contrast: 0.888
    // new
    grayscale: 50%

    // element modify
    before: {
      width: 25%
    }
    after: {
      width: 25%
    }
    // target component modify
    component: {
      option: {
        key: 'svg'
      }
    }
  }
})

.test:
  width: 200px
  filter:
    preset: '1977'
    # remove
    brightness: false
    # modify
    contrast: 0.888
    # new
    grayscale: 50%
    # element modify
    before:
      width: 25%
    after:
      width: 25%
    # target component modify
    component:
      option:
        key: svg

.test {
  width: 200px;
  position: relative;
  filter: contrast(0.888) grayscale(50%) saturate(1.3);
}
.test svg {
  z-index: 1;
  width: 100%;
}
.test::before {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 2;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
.test::after {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 3;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  background: rgba(243,106,188,0.3);
}

ctr('.test', {
  width: 200px
  filter: {
    preset: '1977'
    // remove
    brightness: false
    // modify
    contrast: 0.888
    // new
    grayscale: 50%

    // element modify
    before: {
      width: 25%
    }
    after: {
      width: 25%
    }
    // target component modify
    component: {
      option: {
        key: 'svg'
      }
    }
  }
})

.test {
  width: 200px;
  position: relative;
  filter: contrast(0.888) grayscale(50%) saturate(1.3);
}
.test svg {
  z-index: 1;
  width: 100%;
}
.test::before {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 2;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
.test::after {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 3;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  background: rgba(243,106,188,0.3);
}

.test:
  width: 200px
  filter:
    preset: '1977'
    # remove
    brightness: false
    # modify
    contrast: 0.888
    # new
    grayscale: 50%
    # element modify
    before:
      width: 25%
    after:
      width: 25%
    # target component modify
    component:
      option:
        key: svg

Notes

• Filter modifications are made in the root of the filter Object
• To remove a filter, use the value of false for the filter key
• The corresponding filter elements
  • before
  • after
  • component