Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color Names</title> <style> .swatch { display: inline-block; width: 120px; height: 60px; margin: 4px; border: 1px solid #ccc; border-radius: 4px; position: relative; } .swatch span { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 0.75rem; background: rgba(255,255,255,0.7); } </style> </head> <body> <div class="swatch" style="background:tomato"><span>tomato</span></div> <div class="swatch" style="background:steelblue"><span>steelblue</span></div> <div class="swatch" style="background:mediumseagreen"><span>mediumseagreen</span></div> <div class="swatch" style="background:goldenrod"><span>goldenrod</span></div> <div class="swatch" style="background:orchid"><span>orchid</span></div> <div class="swatch" style="background:slategray"><span>slategray</span></div> <div class="swatch" style="background:coral"><span>coral</span></div> <div class="swatch" style="background:rebeccapurple;color:white"><span>rebeccapurple</span></div> </body> </html>
Result
Open