DEV Community

Alex Quasar
Alex Quasar

Posted on

DUOTONE

#gatsby #duotone #css #help

Hello DEV community. I am working with Gatsby.js and a using the image optimization features which are really cool. I am have come across something called duotone which inside the childImageSharp properties of a fluid container. For example, part of my GraphQL query

mainImage { sharp: childImageSharp { fluid( maxWidth: 100 maxHeight: 100 duotone: { shadow: "#95ADE9", highlight: "#AFC4D8" } ) { ...GatsbyImageSharpFluid_withWebp } } } }
Enter fullscreen mode Exit fullscreen mode

Is anyone an expert on DUOTONE, I want a quick way to see how my images would look with different DUOTONE styles, similar to a CSS color picker, but for DUOTONE.

Any suggestions?

Top comments (1)

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

I don't know about duotone or Gatsby, and I know that this is not related to the question itself, but adding the #help tag could make people find your question faster. Also, you can format the code block using three backticks (`) instead of only one (that way it the code would be easier to read, and maybe easier to help you too.)