Как в css сделать прозрачным?

Прозрачность элемента целиком задаётся свойством opacity от 0 до 1, но оно затрагивает и содержимое внутри, включая текст. Если нужен прозрачный только фон, а текст поверх должен оставаться чётким, используйте цвет в формате rgba или hsla с последним параметром альфа-канала, например background: rgba(0,0,0,0.5), тогда фон полупрозрачный, а текст сверху остаётся полностью видимым.

ставил opacity на карточку а текст внутри тоже стал полупрозрачным и еле читаемым, пришлось на rgba фона переделывать

Используйте rgba вместо opacity, если текст внутри должен остаться чётким, opacity размывает весь элемент целиком включая содержимое.

• opacity: 0.5 делает прозрачным весь элемент целиком, включая текст и дочерние элементы внутри него.
• rgba или hsla в background прозрачным делают только фон, содержимое поверх остаётся чётким, это чаще то что реально нужно.
• Современный вариант, четвёртое значение через слэш в обычном hex или названии цвета тоже работает, например rgb(0 0 0 / 50%), но поддержку в старых браузерах лучше проверить перед использованием.
• opacity: 0 не убирает элемент из потока документа, он остаётся кликабельным и занимает место, для полного скрытия используйте display: none или visibility: hidden в зависимости от задачи.
• backdrop-filter: blur даёт эффект размытого стекла позади полупрозрачного блока, отдельная история от простой прозрачности.