CSS Questions & Answers – Gradients without Images

This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Gradients without Images”.

1. Which of the following CSS Gradient Functions sets the direction and colors of a gradient that fades from one color to the next in a straight line?
a) gradient()
b) line-gradient()
c) linear-gradient()
d) none of the mentioned
View Answer

2. Which of the following CSS Gradient Functions creates a circular or elliptical gradient, and optionally sets its shape, size, and position?
a) radial-gradient()
b) circular-gradient()
c) elliptical-gradient()
d) none of the mentioned
View Answer

3. Which of the following CSS Gradient Functions Creates a radial gradient that repeats infinitely?
a) repeat-radial-gradient()
b) repeating-radial-gradient()
c) infinite-radial-gradient()
d) none of the mentioned
View Answer

4. Which of the following is not a browser-specific versions of linear-gradient()?
a) -moz-linear-gradient()
b) -o-linear-gradient()
c) -mac-linear-gradient()
d) -webkit-linear-gradient()
View Answer

5. Which of the following argument is not accepted by radial-gradient() function?
a) Shape
b) Time
c) Color stops
d) Position
View Answer

6. Which of the following function creates a CSS gradient image that can be used anywhere an image URL is required, including background-image, border-image, and list-style properties?
a) canvas
b) gradient
c) animation
d) color
View Answer

7. Which of the following option best explain this code “background-image: repeating-radial-gradient(circle at 50% 100%, #FFEB79, #D9CC3C 5%);”?
a) Creating Infinte circular Gradients
b) Creating Repeating Circular Gradients
c) Creating Repeating Radial Gradients
d) Creating Infinite Radial Gradients
View Answer

8. Which of the following option best explain this code “background-image: repeating-linear-gradient(-45deg, #426A77, #FFF 6px);”?
a) Creating Straight Stripes
b) Creating Cubic Stripes
c) Creating Spiral Stripes
d) Creating Diagonal Stripes
View Answer

9. Which of the following option best explain this code “background-image: repeating-linear-gradient(to right, #D9CC3C, #FFEB79 5%, #D9CC3C 10%);”?
a) Creating a Repeating Gradient
b) Creating a Mix Repeating Gradient
c) Creating a Shadow Repeating Gradient
d) Creating a Smooth Repeating Gradient
View Answer

Sanfoundry Global Education & Learning Series – CSS.

To practice all areas of CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.

If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]