Text, photos, and other aspects on a webpage can have visual effects applied to them using CSS filters. We can access effects like color, blur, and shifting on an element’s rendering before the element is displayed, thanks to the CSS filter property.<\/p>\n\n\n\n
In this article, we will build a photo editor using React and some CSS filters.<\/p>\n\n\n\n
Specifically, in this article we’ll learn how to:<\/p>\n\n\n\n
- \n
- Understand the CSS filter properties with a quick recap<\/li>\n\n\n\n
- Set up our React project and start building out our application<\/li>\n\n\n\n
- Set up the JSX structure for our project.<\/li>\n\n\n\n
- Style our project using standard CSS. This includes our project sidebar.<\/li>\n\n\n\n
- Make our sidebar, containing our CSS filters, responsive using JavaScript.<\/li>\n\n\n\n
- Add some functionality to our slider using JavaScript<\/li>\n\n\n\n
- See the final app in action<\/li>\n<\/ul>\n\n\n\n
A quick recap of 11 CSS filter properties<\/strong><\/h2>\n\n\n\n
Let\u2019s look at some of the CSS Filter properties and what they do:<\/p>\n\n\n\n
- \n
- blur(): <\/strong>
blur()<\/code> applies the blur effect to an element. If the blur value is not specified then it takes in0<\/code> as the default value.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
70%<\/code> blur:<\/p>\n\n\n\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f77992f3.png\" "\\"The")
<\/a>The CoderPad logo is blurred by the CSS filter<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- brightness(): <\/strong>
brightness()<\/code> controls how bright the element is. It is completely black at0%<\/code> brightness, and it is identical to the original at 100% brightness. Elements are brighter when the values are higher than100%<\/code>.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
99%<\/code> brightness:<\/p>\n\n\n\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f79b5c10.png\" "\\"The")
<\/a>The CoderPad logo with the brightness increased to the extent that the word “Pad” is no longer visible<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- contrast(): <\/strong>
contrast<\/code> aids in adjusting an element’s contrast. When the contrast is0%<\/code>, an element is completely black; when it is100%<\/code>, it shows the original element.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
70%<\/code> contrast:<\/p>\n\n\n\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7ac2897.png\" "\\"The")
<\/a>Contrast is decreased in the CoderPad image, making all colors more contrasted<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- grayscale(): <\/strong>The colors of an element are changed to black and white in a grayscale. The grayscale
0%<\/code> represents the original element, while100%<\/code> grayscale displays the element in grayscale entirely. Values ofgrayscale<\/code> in between0%<\/code> and100%<\/code> are a mix of grayscale and color. Negative values are not accepted by grayscale.<\/li>\n<\/ul>\n\n\n\nThe result of 100% grayscale:<\/p>\n\n\n
\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7bce864.png\" "\\"The")
<\/a>The CoderPad logo entirely grayscaled. The red in the logo is now a dark gray<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- hue-rotate(): <\/strong>The image is given a different color rotation with
hue-rotate()<\/code>. The value specifies how many degrees the picture samples will be rotated around the color circle. The default value of 0 degrees represents the original image.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
70%<\/code> hue-rotate:<\/p>\n\n\n\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7cc64b1.png\" "\\"The")
<\/a>A hue-rotated CoderPad logo, making the red look like a purple.<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- sepia(): <\/strong>
sepia()<\/code> transforms an image into a sepia image, where100%<\/code> of the image is sepia and 0% is the original image.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
70<\/code> sepia:<\/p>\n\n\n\n![\"The](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7db361e.png\" "\\"The")
<\/a>The CoderPad logo with 70% sepia applied, making the colors more brown<\/figcaption><\/figure>\n<\/div>\n\n\n - \n
- saturate():<\/strong> To control an element’s saturation,
saturate()<\/code> is used.100%<\/code> saturate represents the original element, while0%<\/code> saturate denotes an element that is entirely unsaturated. An element that is super-saturated has a value greater than100%<\/code>.<\/li>\n<\/ul>\n\n\n\nThe result when adjusted to
100<\/code> saturate:<\/p>\n\n\n\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-17.png\")
<\/a>The normal CoderPad logo, with 100% saturation, leading to a normal image<\/figcaption><\/figure>\n<\/div>\n\n\n Other CSS filters include:<\/p>\n\n\n\n
- \n
- invert(): <\/strong>The element is reversed by
invert()<\/code>. The default value of 0% represents the initial image. The image is entirely inverted when the percentage is100%<\/code>. Negative values are not recognized byinvert<\/code>.<\/li>\n<\/ul>\n\n\n\n- \n
- opacity(): <\/strong>The image’s opacity effect is controlled by
opacity()<\/code>. When an element has0%<\/code> opacity, it is fully transparent; when it has100%<\/code> opacity, the original element is displayed. A negative value is not recognized by this filter.<\/li>\n<\/ul>\n\n\n\n- \n
- drop-shadow(): <\/strong>
drop-shadow()<\/code> gives the element a drop shadow appearance. It accepts the valuesblur<\/code>,spread<\/code>,color<\/code>,h-shadow<\/code>, andv-shadow<\/code>. It can be applied to shapes as well as images because it can have the same shape as the original. The shadow will be moved to the left of the image by the negative values for theh-shadow<\/code> andv-shadow<\/code>.<\/li>\n<\/ul>\n\n\n\n- \n
- url(): <\/strong>In order to apply some effects to an HTML element, the url filter uses a string value linking to an SVG<\/a> filter element.<\/li>\n<\/ul>\n\n\n\n
To learn more about CSS Filter properties with more in-depth practical examples, check out our article titled \u201cEverything You Need to Know about All 11 CSS Filters<\/a>\u201d.<\/p>\n\n\n\n
Set up a React project<\/strong><\/h2>\n\n\n\n
The first thing we want to do in order to create our CSS-filter-powered photo editing application is to create a React project. We can do this by running the following command on our terminal:<\/p>\n\n\n
npx create-react-app my-editor<\/code><\/span><\/pre>\n\n\nThis will automatically install all the dependencies needed to run a React app, and build a React project. To run your newly installed React app on your browser, run the
npm start<\/code> command. This is what it will look like in the browser:<\/p>\n\n\n
- url(): <\/strong>In order to apply some effects to an HTML element, the url filter uses a string value linking to an SVG<\/a> filter element.<\/li>\n<\/ul>\n\n\n\n
- drop-shadow(): <\/strong>
- opacity(): <\/strong>The image’s opacity effect is controlled by
- invert(): <\/strong>The element is reversed by
- saturate():<\/strong> To control an element’s saturation,
- sepia(): <\/strong>
- hue-rotate(): <\/strong>The image is given a different color rotation with
- grayscale(): <\/strong>The colors of an element are changed to black and white in a grayscale. The grayscale
- contrast(): <\/strong>
- brightness(): <\/strong>
- blur(): <\/strong>
![\"\"\/](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7e875c8.png\")
<\/a>![\"\"\/](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_631f6f7eec0ce.png\")
<\/a>