Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Simple solid background */ .card { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; } /* Translucent background — text stays opaque */ .frosted { background-color: rgb(255 255 255 / 0.75); backdrop-filter: blur(12px); } /* Gradient + solid colour fallback */ .hero { background-color: #1a73e8; /* fallback */ background-image: linear-gradient(135deg, #1a73e8, #0d47a1); } /* Dark mode via custom property */ :root { --surface: #ffffff; } @media (prefers-color-scheme: dark) { :root { --surface: #1e1e1e; } } .surface { background-color: var(--surface); }
Result
Open