This content originally appeared on Zell Liew and was authored by Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/css-color-rgb-instead-of-rgba. We hope to fix this soon!).
If you want to support transparency in a CSS rgb or hsl function, there's no need to write rgba or hsla anymore. You can simply write rgb or hsl with a / to indicate the alpha.
No need for commas too!
Here's an example.
.rgb {
rgb(59 50 103 / 0.3)
}
.hsl {
color: hsl(250 35% 30% / 0.3);
}
Adam Argyle's tweet explains this better than I can.
{/* TODO: Fix the Tweet Thing so this post can work */}
Here's the good news: This is supported across all major browsers — so you can use it in production today!
You can also use this if you're a Sass user — Dart Sass supports this syntax too, but it converts the function into a regular rgba underneath the hood.
// What you write
.selector {
color: hsl(250 35% 30% / 0.3);
}
// Compiled CSS
.selector {
color: rgba(59, 50, 103, 0.3);
}
That's it!
This content originally appeared on Zell Liew and was authored by Zell Liew
Zell Liew | Sciencx (2022-03-24T16:00:00+00:00) New CSS Color syntax — rgb instead of rgba. Retrieved from https://www.scien.cx/2022/03/24/new-css-color-syntax-rgb-instead-of-rgba/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.