Details tag generator

Generator

See preview at the end of the page!

Set dimensions

Width

600

px

Height

100

px

Padding

0

px

---

Customize border

Border ────Normal Borders──── None Hidden Solid Double Dotted Dashed ─────3D Borders───── Groove Ridge Inset Outset

Border Width

1

px

Border Color

---

Customize font

Font ─────Fonts───── Serif Sans-serif Monospace Cursive Fantasy System-UI

Font Size

12

px

Font Color

---

Change background color

Background Color

---

Set the content

Summary Content

Details Content

---

Preview the result

---

Generate your code

Generate

Check out this details tag gallery!

Gallery

Details Tag Gallery

Gallery

This is a gallery of details tags styled with CSS I made. I would appreciate if you report (in the comments) any possible upgrades in the code, as I am a beginner in web development. Enjoy : ) !

Generator

Normal <details> with height transition

Some content here

Color, font-size and height transition

Some content here

With disappering <summary> (opacity and margin-left)

Some content here