Chapter 11 Intermediate 58 Questions

Practice Questions — Colors, Backgrounds, and Gradients

← Back to Notes

15 Easy

19 Medium

11 Hard

Topic-Specific Questions

Question 1

Easy

What color is produced by #f00?

3-digit hex shorthand doubles each digit.

Pure red. #f00 expands to #ff0000.

Question 2

Easy

Which color is this?

color: rgb(0, 255, 0);

RGB order is red, green, blue.

Pure green.

Question 3

Easy

What does the alpha value in rgba(0, 0, 0, 0.5) mean?

Alpha controls transparency.

The color is 50% opaque (semi-transparent).

Question 4

Easy

In hsl(270, 90%, 65%), what does 270 represent?

HSL stands for Hue, Saturation, Lightness.

The hue -- a position on the color wheel (0-360). 270 is purple.

Question 5

Easy

What does background-size: cover do?

Think about how the image fills the container.

Scales the image to fully fill the container, cropping parts that do not fit.

Question 6

Easy

What is the default value of background-repeat?

Without setting it, images tile by default.

repeat -- the image tiles in both directions.

Question 7

Easy

How do you create a linear gradient from purple to cyan going left to right?

Use the direction keyword 'to right'.

background: linear-gradient(to right, #a855f7, #06b6d4);

Question 8

Easy

What does the 45deg angle mean in linear-gradient(45deg, red, blue)?

0deg points up, angles go clockwise.

The gradient goes from bottom-left to top-right at a 45-degree angle.

Question 9

Easy

Does border: 2px solid currentColor work?

currentColor refers to the color property.

Yes. The border uses whatever value color is set to.

Question 10

Easy

What is the difference between contain and cover for background-size?

One crops, one leaves space.

cover scales the image to fill the entire container, cropping anything that does not fit. contain scales the image so the entire image fits inside the container, which may leave empty space.

Question 11

Medium

What color does hsl(0, 0%, 50%) produce?

Saturation is 0%.

Medium gray.

Question 12

Medium

What is the result?

.box {
  background: linear-gradient(to right, #a855f7 0%, #a855f7 50%, #06b6d4 50%, #06b6d4 100%);
}

Both stops at 50% create a hard edge.

A hard-edge two-color split: purple on the left half, cyan on the right half, with no blend.

Question 13

Medium

What is the full expansion of #09c?

Each digit doubles.

#0099cc

Question 14

Medium

What does this shorthand do?

background: #f3f4f6 url('bg.jpg') no-repeat center / cover;

The shorthand order is color image repeat position / size.

Sets background color to #f3f4f6, loads bg.jpg as the image, prevents repeating, centers it, and sizes it with cover.

Question 15

Medium

What is the result?

.hero {
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('photo.jpg') no-repeat center / cover;
}

Multiple backgrounds stack. First is on top.

The photo is displayed as a centered covered background with a 60% opaque black overlay on top, darkening it for text readability.

Question 16

Medium

What shape does radial-gradient(circle, red, blue) create?

radial-gradient starts from a center point.

A red center fading outward to blue edges in a circular pattern.

Question 17

Medium

What does background-attachment: fixed do?

It changes how the image moves during scrolling.

The background image stays fixed relative to the viewport and does not scroll with the page, creating a parallax effect.

Question 18

Medium

What is logged as the computed background-color?

<style>.x { background: hsl(120, 100%, 50%); }</style>
<div class="x">Hi</div>

Computed values are returned in rgb format.

rgb(0, 255, 0)

Question 19

Medium

How would you write red at 30% opacity using HSLA?

Red is hue 0, full saturation, 50% lightness.

hsla(0, 100%, 50%, 0.3)

Question 20

Medium

What is the difference between opacity: 0.5 and background: rgba(0,0,0,0.5)?

Think about what gets faded.

opacity: 0.5 fades the entire element including all text and children. rgba only makes the background semi-transparent while keeping text fully opaque.

Question 21

Hard

What is the effect?

.stripes {
  background: repeating-linear-gradient(45deg, #a855f7 0 20px, #06b6d4 20px 40px);
}

repeating-linear-gradient loops the pattern.

Diagonal purple and cyan stripes at 45 degrees, each 20px wide, repeating across the box.

Question 22

Hard

What happens?

.box {
  color: #06b6d4;
  border: 3px solid currentColor;
}
.box:hover { color: #f59e0b; }

currentColor follows the color property.

Initially the text and border are cyan. On hover, both change to amber because currentColor follows the color property.

Question 23

Hard

What does this create?

background: conic-gradient(from 45deg, red, yellow, green, cyan, blue, magenta, red);

conic-gradient rotates colors around the center. 'from' sets the start angle.

A rainbow color wheel starting at 45 degrees (top-right) and rotating around the center.

Question 24

Hard

What is the difference between background-size: contain and background-size: 100% 100%?

One preserves aspect ratio, one does not.

contain preserves the image's aspect ratio while fitting inside the container (may leave empty space). 100% 100% stretches the image to exactly fill the container, possibly distorting it.

Question 25

Hard

Why do designers often prefer HSL over hex for building color palettes?

Think about making a lighter or darker shade of the same color.

HSL lets you tweak a color easily: change lightness for variants (darker/lighter), change saturation for muted versions, keep the same hue for family consistency. With hex, you have to guess new values or use a color picker. HSL is more intuitive for building design systems.

Mixed & Application Questions

Question 1

Easy

What color is #000000?

All channels are 0.

Pure black.

Question 2

Easy

What color is #ffffff?

All channels are max.

Pure white.

Question 3

Easy

Which format lets you set transparency: rgb or rgba?

The extra letter stands for alpha.

rgba. The 'a' is alpha (opacity).

Question 4

Easy

What does background-position: top right do?

Two values: vertical then horizontal? Or horizontal then vertical?

Places the background image at the top-right corner of the container.

Question 5

Easy

What is the shorthand for background-image: url(pic.jpg); background-repeat: no-repeat;?

Use the background shorthand.

background: url(pic.jpg) no-repeat;

Question 6

Medium

What gradient direction does 180deg point?

0deg is to top.

Downward (to bottom).

Question 7

Medium

How do you make a gradient overlay over an image in one background declaration?

Multiple backgrounds are comma-separated. Overlay goes first.

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img.jpg') center/cover no-repeat;

Question 8

Medium

What does background-size: 200px 100px do?

Two values = width and height.

Sets the background image to exactly 200px wide and 100px tall.

Question 9

Medium

What is the computed color for hsl(210, 100%, 50%)?

Hue 210 is between green (120) and blue (240).

A bright blue with a slight cyan tint -- roughly rgb(0, 128, 255).

Question 10

Medium

What does this rule do?

.hero { background-position: 50% 80%; }

Percentages in background-position are relative to the container minus image.

Centers the image horizontally and positions it 80% from the top (low down).

Question 11

Medium

What does this gradient look like?

background: linear-gradient(to bottom right, #a855f7, #ec4899, #f59e0b);

Three colors and a diagonal direction.

A diagonal gradient from top-left to bottom-right with purple at the top-left, pink in the middle, and amber at the bottom-right.

Question 12

Medium

When would you choose background-size: contain over cover?

Think about which images must be shown in full.

Use contain when the whole image must always be visible (logos, product photos, illustrations). Use cover when the image is decorative and can be cropped (hero backgrounds, banner photos).

Question 13

Medium

Why is HSL easier to tweak than hex?

Imagine making 'slightly lighter blue'.

In HSL, you just change the lightness value (e.g. 50% to 60%) to get a lighter version. In hex, you have to guess a new combination of digits, which is not intuitive.

Question 14

Medium

Why would you use currentColor for a button border?

What happens on hover when text color changes?

The border automatically matches the text color, even when you change color on hover. One property (color) controls both text and border, reducing duplicate code.

Question 15

Hard

What does this shorthand set?

background: #0f172a url('stars.png') repeat fixed top left;

Parse each piece: color, image, repeat, attachment, position.

Dark navy background color, stars.png image that tiles in both directions, stays fixed as the page scrolls, positioned starting at the top-left.

Question 16

Hard

What is the difference between these two gradients?

a: linear-gradient(to right, red, blue);
b: linear-gradient(90deg, red, blue);

to right = ?deg.

They are identical. 'to right' and '90deg' both mean the gradient runs from left to right.

Question 17

Hard

What does radial-gradient(circle at 20% 30%, white, black) do?

at sets the center point.

Creates a circular radial gradient centered at 20% from the left and 30% from the top, with white at the center fading to black at the edges.

Question 18

Hard

What color is hsl(0, 50%, 90%)?

High lightness means pale.

A very pale pink (desaturated light red).

Question 19

Hard

Why put the overlay gradient FIRST in a multiple background declaration?

Layer order.

In CSS multiple backgrounds, the first one listed is painted on top of the others. To darken an image with an overlay, the overlay must be above the image in the stack, so it comes first in the declaration.

Question 20

Hard

How would you create a glassmorphism effect using background colors?

Use rgba + backdrop-filter blur.

Use a semi-transparent white or dark background like background: rgba(255,255,255,0.1); combined with backdrop-filter: blur(10px); and a subtle border like border: 1px solid rgba(255,255,255,0.2);.

Multiple Choice Questions

MCQ 1

Which is the correct hex shorthand for red?

A. #red
B. #f00
C. #r00
D. #fff000

Answer: B
B is correct. #f00 is the 3-digit shorthand for #ff0000 (pure red). Each digit is doubled.

MCQ 2

What is the alpha value in rgba()?

A. Transparency (0 to 1)
B. Brightness
C. Saturation
D. Hue

Answer: A
A is correct. Alpha controls opacity: 0 is fully transparent, 1 is fully opaque.

MCQ 3

What does HSL stand for?

A. Hex, Shade, Light
B. Hue, Shine, Layer
C. Hue, Saturation, Lightness
D. High, Soft, Low

Answer: C
C is correct. HSL = Hue (color wheel position 0-360), Saturation (0-100%), Lightness (0-100%).

MCQ 4

Which background-size value fills the container, cropping if needed?

A. fit
B. contain
C. cover
D. fill

Answer: C
C is correct. cover fills the container and preserves aspect ratio, cropping whatever does not fit.

MCQ 5

What is the default background-repeat value?

A. no-repeat
B. repeat
C. repeat-x
D. round

Answer: B
B is correct. By default CSS tiles backgrounds in both directions. Use no-repeat to stop this.

MCQ 6

Which creates a linear gradient from left to right?

A. linear-gradient(up, red, blue)
B. linear-gradient(to right, red, blue)
C. gradient(left-right, red, blue)
D. linear(red to blue)

Answer: B
B is correct. 'to right' means starting from the left, ending on the right. Same as 90deg.

MCQ 7

How do you stop a background image from tiling?

A. background-tile: off
B. background-repeat: none
C. background-repeat: no-repeat
D. background: single

Answer: C
C is correct. background-repeat: no-repeat disables tiling. 'none' is not a valid value.

MCQ 8

Which function creates a circular gradient from the center outward?

A. linear-gradient()
B. radial-gradient()
C. conic-gradient()
D. circle-gradient()

Answer: B
B is correct. radial-gradient creates a gradient that starts from a point and spreads outward.

MCQ 9

Which color format supports transparency?

A. Named colors
B. 3-digit hex (#f00)
C. rgba() and hsla()
D. rgb() only

Answer: C
C is correct. rgba and hsla have a 4th alpha value. Modern browsers also accept 8-digit hex and rgb() with a slash for alpha.

MCQ 10

What does currentColor refer to?

A. The last color used on the page
B. The value of the color property
C. The browser default color
D. A random color

Answer: B
B is correct. currentColor always refers to whatever the element's color property is currently set to.

MCQ 11

In multiple backgrounds separated by commas, which layer is on top?

A. The last one listed
B. The first one listed
C. The largest one
D. The alphabetically first

Answer: B
B is correct. In CSS multiple backgrounds, the first one in the comma-separated list is painted on top.

MCQ 12

Which angle equals to right?

A. 0deg
B. 45deg
C. 90deg
D. 180deg

Answer: C
C is correct. 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left.

MCQ 13

Why use rgba instead of opacity for a dark overlay?

A. rgba is faster
B. opacity fades the element AND its children, rgba only fades the background
C. opacity does not work on overlays
D. There is no difference

Answer: B
B is correct. opacity affects everything inside the element. rgba only makes the background translucent while keeping children fully visible.

MCQ 14

Which creates a parallax scroll effect?

A. background-attachment: scroll
B. background-attachment: fixed
C. background-position: fixed
D. position: sticky on background

Answer: B
B is correct. background-attachment: fixed keeps the background stationary while the page scrolls.

MCQ 15

In the hex #a855f7, what does the 'f7' represent?

A. Red channel
B. Green channel
C. Blue channel
D. Alpha channel

Answer: C
C is correct. Hex order is #RRGGBB. The last two digits (f7) are the blue channel.

MCQ 16

What does hsl(0, 0%, 100%) produce?

A. Black
B. Red
C. White
D. Gray

Answer: C
C is correct. Any hue with 0% saturation and 100% lightness is pure white.

MCQ 17

Which gradient is best suited for a pie chart?

A. linear-gradient
B. radial-gradient
C. conic-gradient
D. repeating-linear-gradient

Answer: C
C is correct. conic-gradient rotates colors around a center, which matches pie chart slices exactly.

MCQ 18

What does this background-size value do: background-size: 200px 100px;?

A. Scales proportionally to fit 200x100
B. Forces the image to exactly 200px wide and 100px tall
C. Sets a 200x100 container
D. Invalid syntax

Answer: B
B is correct. Two explicit values set width and height exactly, which may stretch or squash the image.

MCQ 19

How would you create horizontal stripes with a repeating gradient?

A. repeating-linear-gradient(to right, red 0 20px, blue 20px 40px)
B. repeating-linear-gradient(to bottom, red 0 20px, blue 20px 40px)
C. radial-gradient(red, blue)
D. conic-gradient(red, blue)

Answer: B
B is correct. 'to bottom' stacks the stripes vertically, creating horizontal bands. Each color stop defines one stripe width.

MCQ 20

What is the shorthand for background: color image no-repeat center / cover?

A. background: red url('x.jpg') no-repeat center / cover;
B. background: cover center no-repeat url('x.jpg') red;
C. background: red, url('x.jpg'), no-repeat, center, cover;
D. background-all: red url('x.jpg') no-repeat center cover;

Answer: A
A is correct. The correct shorthand order is color, image, repeat, position / size. The / separates position from size.

MCQ 21

You want to darken a hero image with a 50% black overlay. Which is correct?

A. background: url('x.jpg'), rgba(0,0,0,0.5);
B. background: url('x.jpg') rgba(0,0,0,0.5);
C. background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('x.jpg') center/cover;
D. background: url('x.jpg'); filter: brightness(50%);

Answer: C
C is correct. A solid black gradient at 0.5 alpha acts as an overlay on top of the image. rgba colors cannot be layered directly on images in background shorthand.

MCQ 22

What does hsl(270, 90%, 65%) look like compared to hsl(270, 90%, 40%)?

A. They are identical
B. 65% is lighter purple, 40% is darker purple
C. 65% is more saturated
D. 65% is a different hue

Answer: B
B is correct. Both have the same hue (270 = purple) and saturation (90%). Only lightness differs: 65% is lighter, 40% is darker.

MCQ 23

Which is NOT a valid way to specify a color in CSS?

A. #a855f7
B. rgb(168 85 247)
C. hsl(270, 90%, 65%)
D. color(168, 85, 247)

Answer: D
D is correct. color() is not a standard CSS color function. The others are all valid. Modern rgb/hsl allow space-separated syntax too.

MCQ 24

Why might background-size: contain leave empty strips?

A. It is a browser bug
B. It preserves aspect ratio while fitting the entire image inside, so if the container has different proportions, some space is unused
C. It ignores the image size
D. It only works on squares

Answer: B
B is correct. contain always shows the whole image with aspect ratio preserved. When container and image have different proportions, you see empty strips on two sides.

MCQ 25

What is the advantage of using currentColor for borders?

A. It loads faster
B. You only change one property (color) and the border updates automatically
C. Borders cannot use other color values
D. It makes borders transparent

Use conic-gradient with hard stops (same percentage for end of one color and start of next). Circle uses border-radius: 50%.

<!DOCTYPE html>
<html>
<head><style>
  body { font-family: Arial, sans-serif; padding: 40px; text-align: center; background: #f9fafb; }
  .pie {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    margin: 20px auto;
    background: conic-gradient(
      #a855f7 0 40%,
      #06b6d4 40% 70%,
      #f59e0b 70% 90%,
      #ec4899 90% 100%
    );
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  }
  .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; font-size: 14px; }
  .item { display: flex; align-items: center; gap: 6px; }
  .dot { width: 16px; height: 16px; border-radius: 50%; }
</style></head>
<body>
  <h2>Riya's Study Week</h2>
  <div class="pie"></div>
  <div class="legend">
    <div class="item"><span class="dot" style="background:#a855f7"></span>Coding 40%</div>
    <div class="item"><span class="dot" style="background:#06b6d4"></span>Maths 30%</div>
    <div class="item"><span class="dot" style="background:#f59e0b"></span>Reading 20%</div>
    <div class="item"><span class="dot" style="background:#ec4899"></span>Play 10%</div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass