Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* opacity affects the element AND all children */ .modal-backdrop { background: #000; opacity: 0.6; /* children also become 60% visible */ } /* Alpha channel — only the background is transparent */ .card-overlay { background: rgb(0 0 0 / 0.6); color: #fff; /* text stays fully opaque */ padding: 1rem; border-radius: 8px; } /* Fade-in animation using opacity */ .fade-in { animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Semi-transparent button on hover */ .ghost-btn { background: transparent; border: 2px solid currentColor; } .ghost-btn:hover { background: rgb(26 115 232 / 0.1); }
Result
Open