Alpha versus opacity, and transparent
Look at the text: in the first card it is solid, in the second it is faded with its background.
CSS can write the same colour many ways (names, hex, rgb(), hsl()), add transparency with an alpha value, follow the text colour with currentColor, and erase colour with transparent; the browser turns them all into the same red, green and blue numbers.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the colour rgb(255 165 0) (orange) as hex, and give a version with 25% alpha in both hex and rgb() form.
Make a .badge with text colour #be123c, a 2px border in the same colour, and a background of the same red at 10% alpha.
Explain it without notes
List four ways to write the same opaque colour and say how the browser stores it.
How do hsl()'s three numbers work, and why is it handy for making shades?
What is the difference between opacity: 0.5 and a colour with 50% alpha?
What is currentColor and where is it useful?
Preview
Console
Nothing logged yet.Expected console output
alpha background: rgba(37, 99, 235, 0.5)
opacity card opacity: 0.5
transparent is: rgba(0, 0, 0, 0)