Style Detail - Grunge

See this style applied to a real page — identical content, different stylesheet.

About This Style

Grunge design originated in the music and subculture scenes of the 90s. Its visual characteristics are often deliberately rough, messy, imperfect, and even somewhat 'dirty' or 'destructive'. It opposes clean, refined design, pursuing a raw, authentic, unembellished aesthetic.

Main Features:

Distressed Textures: Extensive use of textures simulating paper wrinkles, stains, concrete, scratches, tape, splatters, etc.
Irregular Layouts: Elements appear randomly arranged, overlapping, breaking traditional grid and alignment rules.
Dark Tones & Contrast: Often uses dark grays, browns, faded colors, sometimes with strong contrast to bright colors, but generally dark overall.
Handwritten or Distorted Fonts: Use of handwritten fonts, typewriter fonts, stencil fonts, or distorting, blurring, or damaging regular fonts.
Collage Elements: Images, text, and graphic elements that look like they were randomly torn and pasted together.
Rough Edges: Element edges may not be smooth, appearing torn, frayed, or blurred.
Layering: Elements are layered on top of each other, creating depth and a sense of chaos.

Although originating from print and music posters, the Grunge style also has applications in web design, especially for websites that need to express rebellion, non-mainstream, retro, or handmade feelings, such as band websites, art projects, independent brands, etc.

Sample AI Prompt

Design a grunge-style band website. Use distressed paper or concrete textures, ripped edges, layered elements, maybe some 'dirty' brush strokes, dark colors (browns, greys, muted reds), and a typewriter or stencil font.

(Chinese Explanation: Design a grunge-style band website. Use distressed paper or concrete textures, ripped edges, layered elements, maybe some 'dirty' brush strokes, dark colors (browns, greys, muted reds), and a typewriter or stencil font.)

Theme CSS Code Snippet

Below is the core CSS code for applying the Grunge style as a global theme (body.theme-grunge):

/* 3. Grunge Theme */
body.theme-grunge {
    /* Subtle noise texture */
    --grunge-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    --page-bg: #3a3a3a; /* Dark gray background */
    --page-bg-gradient: none;
    background-image: var(--grunge-texture); /* Apply texture */
    --text-color: #b0b0b0; /* Light gray text */
    --heading-color: #dcdcdc; /* Bright gray heading */
    --link-color: #a52a2a; /* Brown link */
    --link-hover-color: #cd5c5c; /* Indian red link hover */
    --border-color: #555; /* Dark gray border */
    --card-bg: #4a4a4a; /* Slightly lighter gray card background */
    --card-bg-image: var(--grunge-texture); /* Card also applies texture */
    --card-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Noticeable shadow */
    --card-hover-shadow: 3px 3px 7px rgba(0,0,0,0.4); /* Deeper hover shadow */
    --header-bg: #2a2a2a; /* Darker header background */
    --header-text-color: #aaa; /* Header text */
    --header-shadow: inset 0 -2px 4px rgba(0,0,0,0.4); /* Inner shadow */
    --footer-text-color: #888; /* Footer text */
    --footer-bg: #3a3a3a; /* Footer background same as page */
    --button-bg: #8b0000; /* Dark red button */
    --button-text-color: #ccc; /* Button text */
    --button-hover-bg: #a52a2a; /* Brown button hover */
    --button-border: 1px solid #777; /* Button border */
    --button-secondary-bg: #333; /* Secondary button background */
    --button-secondary-text-color: #aaa; /* Secondary button text */
    --button-secondary-hover-bg: #555; /* Secondary button hover */
    --button-secondary-border: 1px solid #666; /* Secondary button border */
    --prompt-bg: rgba(0,0,0,0.2); /* Translucent black prompt background */
    --prompt-text-color: #aaa; /* Prompt text */
    --prompt-bg-image: none; /* No texture in prompt area */
    --base-font: var(--font-grunge); /* Use Grunge font */
    --heading-font: var(--font-grunge); /* Headings also use Grunge font */
    --card-border-radius: 3px; /* Slight rounded corners */
    --button-border-radius: 2px; /* Smaller rounded corners */
}

/* Grunge Style Specific Element Adjustments */
body.theme-grunge .card {
    border: 1px solid #222; /* Darker card border */
}
body.theme-grunge a {
    text-decoration: none; /* Remove default underline */
    border-bottom: 1px dashed var(--link-color); /* Use dashed link */
    transition: border-bottom-style 0.2s ease, background-color 0.2s ease;
}
body.theme-grunge a:hover {
    border-bottom-style: solid; /* Change to solid line on hover */
    background-color: rgba(255,255,255,0.05); /* Slight background highlight */
}
/* Can add effects like transform: rotate(-1deg); to some elements to add a sense of randomness */

Note: This is just the core theme CSS. In actual application, the Grunge effect can be further enhanced by adding more textures, element overlays, irregular borders, etc.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download grunge.zip