Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Two gradient layers + colour fallback */ .layered { background-color: #0d47a1; background-image: radial-gradient( circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50% ), radial-gradient( circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50% ), linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); } /* Image on top of a pattern */ .card-hero { background-image: url("/img/logo.svg"), url("/img/dots.svg"); background-position: center center, 0 0; background-size: 100px, auto; background-repeat: no-repeat, repeat; }
Result
Open