CSS image processing

How to add borders , change contrast, greyscale without using JavaScript

Girish Venkatachalam · 2023-10-03 03:39 · 1 claps · 7.2 min read

#css-filters #image-effect #image-processing #css

CSS image processing

How to add borders , change contrast, greyscale without using JavaScript

Image effects with CSS

I have discussed image filters with fabric.js using canvas element before. Today we are exploring how similar things are attained with CSS.

CSS has always supported rounded borders, shadows and transforms, rotate and polygons. We have several methods available without using a single line of JavaScript.

What is CSS?

Cascading style sheets were created for adding beauty,layout design and presentation layer of HTML. Over time it has expanded in scope and taken on stuff like animations with keyframes, hover effects and so on.

Demo of effects

Source code

Mirror effect3d

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>3D effect</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="wrapper">

<div class="foreground"><img src="bhawhite.jpg" /></div>
<div class="midground"><img src="bhawhite.jpg" /></div>
<div class="background"><img src="bhawhite.jpg" /></div>
</div>

</body>
</html>

#wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  width: 379px;
  height: 568px;
  box-shadow: 0px 0px 30px 5px rgba(0,0,0,.3);
  border: 10px solid #fff;
}
/********BACKGROUND********/
.background, .dust, .foreground, .midground  {
  position: absolute;
  margin-left: -80px;
  z-index: 1;
}



/********FOREGROUND********/  
  .foreground {
  z-index: 3;
}

/********MIDGROUND********/
.midground {
  z-index:2;
}

/********DUST********/
.dust {
  z-index: 4;
}

.mask01, .mask02, .mask03, .mask04 {
  position: absolute;
  width: 100px;
  height: 600px;
  background-color: #000000;
  z-index: 1000;
}
.mask02{
  width: 100%;
  height: 30px;
}
.mask03{
  width: 3000px;
  height: 600px;
  margin-left: 500px;
}
.mask04{
  width: 100%;
  height: 300px;
  margin-top: 600px;
}

Color pencil

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - colored pencil effect on image pure css</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="colored-pencil-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.colored-pencil-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
}
@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(bhawhite.jpg),url(bhawhite.jpg);    
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}
[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Pencil

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by ha quang thien</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="pencil-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.pencil-effect {
  background-image: url();
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(bhawhite.jpg),url(bhawhite.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}
[class$=-effect] img {
 vertical-align: top !important;
 margin: 0 !important;
 opacity: 0 !important;
}
/* CodePen Styles */
body {
 display: flex;
 height: 100vh;
}
div {
 margin: auto;
}

Slice image

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Image Mosaic Effect with CSS Grids &amp; Blend Modes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>
<section>
 <img src="bhawhite.jpg" alt="">
 <article>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </article>
</section>

</body>
</html>

section {
  width: 80%;
  margin: 0 auto;
  line-height: 0;
  position: relative;
}
section img {
  width: 100%;
}
section article {
  position: absolute;
  top: 0;
  width: 100%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  mix-blend-mode: lighten;
}
section div {
  background: black;
  height: 56.3vw;
}
section div:nth-of-type(2) {
  grid-column: 2/4;
}

Watercolor

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by oleTeacher</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="watercolor-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.watercolor-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
}
@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(bhawhite.jpg),url(bhawhite.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(bhawhite.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}

[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Old photo

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Porcelanosa</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="selective-color-effect">
 <img src="bhawhite.jpg" style="max-width:100%">
</div>

</body>
</html>

.selective-color-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
}
@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}

[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Nightvision

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by tr13ze</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="night-vision-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.night-vision-effect {
  background-image: url(bhawhite.jpg), radial-gradient(#00ff00, #000000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  animation-duration: 0.1s;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
  animation-name: animate;
}

[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Mosaic

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Saudad Marketing</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="photo-border-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.photo-border-effect {
  background-image: url(bhawhite.jpg),url(bhawhite.jpg); 
 background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}
[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Mirror

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Saudad Marketing</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="mirror-x-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.mirror-x-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
}
@supports (transform: scaleX(-1)) {
  .mirror-x-effect {
    position: relative;
  }
  .mirror-x-effect:before, .mirror-x-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
  }
  .mirror-x-effect:before {
    left: 0;
    right: 50%;
    transform: scaleX(-1);
  }
  .mirror-x-effect:after {
    left: 50%;
    right: 0;
  }
}

[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Collage

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Luchadora</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="collage-effect">
 <img src="bhawhite.jpg">
</div>
</body>
</html>

.collage-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
}
@supports (background-blend-mode: overlay) {
  .collage-effect {
    background-image:     url(bhawhite.jpg), url(bhawhite.jpg), url(bhawhite.jpg), url(bhawhite.jpg), url(bhawhite.jpg), url(bhawhite.jpg);
background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}
[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Infrared

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by 大漠</title>
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="infrared-effect">
 <img src="bhawhite.jpg">
</div>

</body>
</html>

.infrared-effect {
  background-image: url(bhawhite.jpg);
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}
[class$=-effect] img {
  vertical-align: top !important;
  margin: 0 !important;
  opacity: 0 !important;
}
/* CodePen Styles */
body {
  display: flex;
  height: 100vh;
}
div {
  margin: auto;
}

Conclusion

We have seen some spectacular work done by just CSS. Not sure how browser compliant this is. But it is very nice to see this.

I never knew so much could be done just with CSS. It looks like stylesheets have come a long way since the time it first came long to beautify HTML.

메타데이터

post_id: 971ef7c112e6
slug: css-image-processing-971ef7c112e6
url: https://medium.com/@girish1729/css-image-processing-971ef7c112e6
canonical_url: https://medium.com/@girish1729/css-image-processing-971ef7c112e6
author_url: https://medium.com/@girish1729
status: ok
fetched_at: 2026-07-28 21:39:13

CSS image processing

How to add borders , change contrast, greyscale without using JavaScript

Image effects with CSS

What is CSS?

Demo of effects

Source code

Conclusion

More from Girish Venkatachalam

How to use templating and fetch API for web pages?

Confirm dialog with sweetalert and HTMX

More on 🌐 · Web Development

The State of Axion DAO

Axion DAO: Locked & Loaded

How To Properly Use An Epi Pen For Allergic Reactions

Vibe Coding is OVER.

A História Intimista de Abramovic e Ulay