Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Simple URL image */ .hero { background-image: url("/images/hero.webp"); background-color: #1a237e; /* fallback colour */ min-height: 60vh; } /* Linear gradient */ .banner { background-image: linear-gradient( to bottom right, #1a73e8 0%, #0d47a1 100% ); } /* Radial gradient — spotlight effect */ .spotlight { background-image: radial-gradient( circle at 30% 40%, rgba(255,255,255,0.25) 0%, transparent 60% ); } /* Conic gradient — pie chart slice */ .pie { background-image: conic-gradient( #4caf50 0% 40%, #2196f3 40% 70%, #ff5722 70% 100% ); border-radius: 50%; width: 120px; height: 120px; }
Result
Open