Black And White Images Css

best black and white pictures Black And White Images Css

best black and white pictures Black And White Images Css

Boston black white
A clear crisp black and white business landing page designed to get right to the point
Css file format symbol free icon
Logo css3
Css file format symbol free icon
Grain and mortar
Nantes black white
Css 3 logo free icon
Css gallery for inspiration cssmayo inspirational css gallery showcasing some of the worldss best designed css websites
Html5 1color white
Animated gif the editable text made to contrast with the background image using the
Readme md
Band template
Sneak peek
Dark icon bar template
Html kits
Pattern of black and white lines

Filter Description Play it none Default value. Specifies no effects Play it » blur(px) Applies a blur effect to the image. A larger value will create more blur. If no value is specified, 0 is used. Play it » brightness(%) Adjusts the brightness of the image.

0% will make the image completely black.100% (1) is default and represents the original image. Values over 100% will provide brighter results. Play it » contrast(%) Adjusts the contrast of the image.

0% will make the image completely black.100% (1) is default and represents the original image. Values over 100% will provide results with less contrast. Play it » drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image.

Possible values:h-shadow – Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.v-shadow – Required. Specifies a pixel value for the vertical shadow.

Negative values place the shadow above the image.blur – Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter).

Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).spread – Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink.

If not specified, it will be 0 (the shadow will be the same size as the element). Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color – Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:filter: drop-shadow(8px 8px 10px red);Tip: This filter is similar to the box-shadow property.

Play it » grayscale(%) Converts the image to grayscale. 0% (0) is default and represents the original image. 100% will make the image completely gray (used for black and white images).Note: Negative values are not allowed.

Play it » hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

Note: Maximum value is 360deg. Play it » invert(%) Inverts the samples in the image. 0% (0) is default and represents the original image. 100% will make the image completely inverted.Note: Negative values are not allowed.

Play it » opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:0% is completely transparent.100% (1) is default and represents the original image (no transparency).

Note: Negative values are not allowed.Tip: This filter is similar to the opacity property. Play it » saturate(%) Saturates the image. 0% (0) will make the image completely un-saturated.100% is default and represents the original image.

Values over 100% provides super-saturated results. Note: Negative values are not allowed. Play it » sepia(%) Converts the image to sepia. 0% (0) is default and represents the original image. 100% will make the image completely sepia.

Note: Negative values are not allowed. Play it » url() The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example:filter: url(svg-url#element-id) initial Sets this property to its default value.

Read about initial inherit Inherits this property from its parent element. Read about inherit

If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I don’t know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But that’s a lot of if’s!

The numbers in the table specify the first browser version that fully supports the property.

img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }

edit: Here’s a nice blog post which describes using the new CSS3 filter property in SalmanPK’s answer in concert with the SVG approach described here. Using that approach you’d end up with something like:

Now, all that is needed is to move the gradient to get this effect dynamic: (hover to see it in color)

For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:

For Firefox you don’t need to create a filter.svg file, you can use data URI scheme.

img.desaturate{ filter: gray; /* IE */ -webkit-filter: grayscale(1); /* Old WebKit */ -webkit-filter: grayscale(100%); /* New WebKit */ filter: url(resources.svg#desaturate); /* older Firefox */ filter: grayscale(100%); /* Current draft standard */ }

test on code pen with 10 different colors via pseudo-element, last is gray . (reload to switch to another image)

Note: Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard “filter” property that has been deprecated. This was mostly used for opacity when needed support from IE8 and down.

I got it from the PHP GD library and added some variable to automate the process…

I originally used SalmanPK’s answer, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.

be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags.

img { filter: url(filters.svg#desaturate); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ }

img.grayscale { /* Firefox 10+, Firefox on Android */ filter: url(“data:image/svg+xml;utf8,

img {    -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */    filter: grayscale(100%);}

As a complement to other’s answers, it’s possible to desaturate an image half the way on FF without SVG’s matrix’s headaches:

However, I did find this post from last June that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.

div { width: 600px; height: 400px; } .test { background: url(“”), linear-gradient(0deg, white 33%, black 66%), url(“”); background-position: 0px 0px, 0px 0%, 0px 0px; background-size: cover, 100% 300%, cover; background-blend-mode: luminosity, multiply; transition: all 2s; } .

test:hover { background-position: 0px 0px, 0px 66%, 0px 0px; }

One more caveat is that IE10 doesn’t support “filter: gray:” in standards compliant mode anymore, so needs compatibility mode switch in headers to work:

#grayscale”); filter: none; -webkit-filter: grayscale(0%); }

Although you didn’t want to use Javascript, I think you’ll have to use it. You could also use a server side language to do it.

If you’re willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support

I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

#grayscale”); /* Firefox 3.5+ */ filter: grayscale(@percent); /* Current draft standard */ -webkit-filter: grayscale(@percent); /* New WebKit */ -moz-filter: grayscale(@percent); -ms-filter: grayscale(@percent); -o-filter: grayscale(@percent); }

so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit…

You can use one of the functions of jFunc – use the function “jFunc_CanvasFilterGrayscale”

Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.

And strictly speaking since SVG is HTML the solution is pure html+css 🙂

The property is still not fully supported and still requires the -webkit-filter property for support across all browsers.

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

#grayscale”); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } img.grayscale.disabled { filter: url(“data:image/svg+xml;utf8,

support for native CSS filters in webkit has been added from the current version 19.0.1084.46

In webkit and Firefox there is currently no way to desatuarte an image solely with CSS. so you will need to use either canvas or SVG for a client side solution.

Neat hint here, it uses the saturate type for the matrix so you don’t need to do anything fancy to change the percentage.

Check out the documentation on the usage, it is pretty simple. docs

img {    -webkit-filter: opacity(30%); /* Safari */    filter: opacity(30%);}

You can animate the effect setting 3 layers. The first one will be the image, and the second will be a white-black gradient. If you apply a multiply blend mode on this, you will get a white result as before on the white part, but the original image on the black part (multiply by white gives white, multiplying by black has no effect.)

.desaturate { filter: url(“#desaturate”); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: “Helvetica”; }

But I think using SVG is more elegant. check out my blog post for the SVG solution that works for both Firefox and webkit:

Just got the same problem today. I’ve initially used SalmanPK solution but found out that effect differs between FF and other browsers. That’s because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise I’ve found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:

img {    -webkit-filter: sepia(100%); /* Safari */    filter: sepia(100%);}

img {    -webkit-filter: hue-rotate(90deg); /* Safari */    filter: hue-rotate(90deg);}

Default value: none Inherited: no Animatable: yes. Read about animatable Version: CSS3 JavaScript syntax:”grayscale(100%)” Try it

#grayscale”); } svg { background:url(; } svg image:hover { opacity: 0; }

img {    -webkit-filter: contrast(200%) brightness(150%);  /* Safari */    filter: contrast(200%) brightness(150%);}

Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).

The filter property defines visual effects (like blur and saturation) to an element (often

Not the answer you’re looking for? Browse other questions tagged css image css3 grayscale or ask your own question.

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

img.desaturate { transition: all 0.2s linear; .saturate(0); &:hover { .saturate(1); } }

Tip: To use multiple filters, separate each filter with a space (See “More Examples” below).

This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.

Tabs Dropdowns Accordions Convert Weights Animated Buttons Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List

#grayscale”); /* Firefox 3.5+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; /* IE6+ */

On the white part of the gradient, you get the same effect as before. On the black part of the gradient, you are blending the image over itself, and the result is the unmodified image.

It will not give one single color scale, but will shades color out of range.

Simplest way to achieve grayscale with CSS exclusively is via the filter property.

img {    -webkit-filter: saturate(800%); /* Safari */    filter: saturate(800%);}

For more information why you should use matrix I posted more likely that the robertc’s one check following links:

img {    -webkit-filter: grayscale(50%); /* Safari */    filter: grayscale(50%);}

Here’s a mixin for LESS that will let you choose any opacity. Fill in the variables yourself for plain CSS at different percentages.

If you, or someone else facing a similar problem in future are open to PHP. (I know you said HTML/CSS, but maybe you are already using PHP in the backend) Here is a PHP solution:

img { -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */ filter: grayscale(100%); }

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count). Would you like to answer one of these unanswered questions instead?

So I googled “canvas grayscale”, and the first result was which seems to work.


0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0

Update: I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11:

Try this jquery plugin. Although, this is not a pure HTML and CSS solution, but it is a lazy way to achieve what you want. You can customize your greyscale to best suit your usage. Use it as follow:

The luminosity is taken from the image, the color is taken from the background. Since it is always white, there is no color.

For grayscale as a percent in Firefox, use saturate filter instead: (search for ‘saturate’)

img {    -webkit-filter: brightness(200%); /* Safari */    filter: brightness(200%);}

img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } /* Disable grayscale on hover */ img:hover { -webkit-filter: grayscale(0); filter: none; }

0.299 0.299 0.299 0 0.587 0.587 0.587 0 0.112 0.112 0.112 0 0 0 0 1

img {    -webkit-filter: blur(5px); /* Safari */    filter: blur(5px);}

One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.

.test { width: 300px; height: 200px; background: url(“”), white; background-size: cover; } .test:hover { background-blend-mode: luminosity; }

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

The luminance and colour difference signals Margus’s answer for question: “greyscalevalue in colorvalue” @stackoverflow part: Edit 2: @Hans Passant Charles A. Bouman – Purdue university – Analog TV page 20 & 21 And here you can find some C# and VB codes

img {    -webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari */    filter: drop-shadow(8px 8px 10px gray);}

To get proper conversion from colored image to grayscale image instead of using matrix like this:

#grayscale”); /* IE 6-9 */ filter: gray; /* Chrome 19+, Safari 6+, Safari 6+ iOS */ -webkit-filter: grayscale(100%); } img.grayscale.disabled { filter: none; -webkit-filter: grayscale(0%); }

A new way to do this has been available for some time now on modern browsers.

img.background {    -webkit-filter: blur(35px); /* Safari */    filter: blur(35px);}

In your CSS you reference the filter using the Firefox specific filter property:

The method by Ax simply makes the image transparent and has a black background behind it. I’m sure you could argue this is grayscale.

img {    -webkit-filter: invert(100%); /* Safari */    filter: invert(100%);}

It’s in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now.

Doesn’t look like it’s possible (yet), even with CSS3 or proprietary -webkit- or -moz- CSS properties.

.blur {    -webkit-filter: blur(4px);    filter: blur(4px);}.brightness {    -webkit-filter: brightness(0.30);    filter: brightness(0.30);}.contrast {    -webkit-filter: contrast(180%);    filter: contrast(180%);}.

grayscale {    -webkit-filter: grayscale(100%);    filter: grayscale(100%);}.huerotate {    -webkit-filter: hue-rotate(180deg);    filter: hue-rotate(180deg);}.invert {    -webkit-filter: invert(100%);    filter: invert(100%);}.

opacity {    -webkit-filter: opacity(50%);    filter: opacity(50%);}.saturate {    -webkit-filter: saturate(7);    filter: saturate(7);}.sepia {    -webkit-filter: sepia(100%);    filter: sepia(100%);}.

shadow {    -webkit-filter: drop-shadow(8px 8px 10px green);    filter: drop-shadow(8px 8px 10px green);}

If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You can’t use it with images loaded from a different domain.

img {    -webkit-filter: contrast(200%); /* Safari */    filter: contrast(200%);}

For more demos, checkout IE testdrive’s CSS3 Graphics section and this old IE blog

.saturate(@value:0) { @percent: percentage(@value); filter: url(“data:image/svg+xml;utf8,

Property filter 53.018.0 -webkit- 13.0 35.0 9.16.0 -webkit- 40.015.0 -webkit-

background-blend-mode allows you to get some interesting effects, and one of them is grayscale conversion

This method should be faster than the other because the browser will not need to do a second HTTP request.

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

It doesn’t need to be IE-compatible (and I imagine it won’t be) — if it works in FF3 and/or Sf3, that’s good enough for me.

Where $v is between 0 and 1. It’s equivalent to filter:grayscale(50%);.

Following on from’s answer, and also Roman Nurik’s answer, and relaxing somewhat the the ‘no SVG’ requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.

Numbers followed by -webkit- specify the first version that worked with a prefix.

The value luminosity , set on a white background, allows it. (hover to see it in gray)

Absolute positionning hover an img (or text area wich needs no click nor selection) can closely mimic effects of color scale , via rgba() or translucide png .

You don’t need use so many prefixes for full use, because if you choose prefix for old firefox, you don’t need use prefix for new firefox.

Black And White Images Css