Can Gradients Be Used With CSS image-set()?

You can use CSS gradients with image-set() function to specify a set of gradients to be used for different screen resolutions. This allows the browsers to automatically select the most suitable CSS gradient depending on user's device resolution.

For example, the following specifies different linear-gradient values depending on the user's device resolution:

background-image: image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
  /* ... */
);

In this example, if the user device supports standard resolution, the browser will choose the value corresponding to 1x. Otherwise, the browser will choose the closest match.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.