Filter Object

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

Edit
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

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.

Edit
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

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.

Edit
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