Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 30px; background: #f1f5f9; } .card { background: white; padding: 24px; border-radius: 12px; margin: 16px 0; } .soft { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .bold { box-shadow: 0 8px 24px rgba(99,102,241,0.3); } .inner{ box-shadow: inset 0 2px 8px rgba(0,0,0,0.1); background: #ede9fe; } h2 { text-shadow: 2px 2px 4px rgba(99,102,241,0.4); color: #4f46e5; } .faded { opacity: 0.4; } </style> </head> <body> <h2>Shadow Effects</h2> <div class="card soft">Soft shadow (0 2px 8px)</div> <div class="card bold">Bold coloured shadow</div> <div class="card inner">Inset shadow</div> <div class="card soft faded">Opacity 0.4 (faded)</div> </body> </html>
Result
Open