Style Details - Grunge

About This Style

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

Main Features:

Distressed Textures: Extensive use of textures simulating paper folds, 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 and somber.
Handwritten or Distorted Fonts: Uses handwritten, typewriter, or stencil fonts, or distorts, blurs, or damages regular fonts.
Collage Elements: Images, text, and graphic elements that look like they were randomly torn and pasted together.
Rough Edges: Element edges may be unsmooth, 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 is also used in web design, especially for websites that need to express rebellion, non-mainstream, retro, or handmade feelings, such as band websites, art projects, and independent brands.

Example 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.

(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 Snippet

The following 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; /* Deeper 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); /* Semi-transparent 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); /* Heading also uses Grunge font */
    --card-border-radius: 3px; /* Slight rounded corners */
    --button-border-radius: 2px; /* Smaller rounded corners */
}

/* Grunge 风格特定元素调整 */
body.theme-grunge .card {
    border: 1px solid #222; /* Deeper 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; /* Becomes solid line on hover */
    background-color: rgba(255,255,255,0.05); /* Slight background highlight */
}
/* Effects like transform: rotate(-1deg); can be added to some elements for a casual feel */

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 package containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download grunge.zip