Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; background: #f1f5f9; } .solid { background: #6366f1; color: white; padding: 20px; margin: 10px 0; border-radius: 8px; } .gradient { background: linear-gradient(90deg, #6366f1, #ec4899); color: white; padding: 20px; margin: 10px 0; border-radius: 8px; } .subtle { background: rgba(99,102,241,0.1); color: #6366f1; padding: 20px; margin: 10px 0; border-radius: 8px; } </style> </head> <body> <div class="solid">Solid background colour</div> <div class="gradient">Linear gradient background</div> <div class="subtle">Transparent (rgba) background</div> </body> </html>
Result
Open