---
title: CSS Patterns Reference
description: Hover effects, transitions, gradients, pseudo-elements for GenerateBlocks
---

# CSS Patterns Reference

Common CSS patterns for GenerateBlocks V2 layouts.

## Styles vs CSS Attribute

| Feature | `styles` (JSON) | `css` (string) |
|---------|-----------------|----------------|
| Basic properties | Yes | Yes (base styles only) |
| Hover states | Via styles object | Generated by plugin |
| Focus states | Via styles object | Generated by plugin |
| Pseudo-elements | No | Yes (only for ::before/::after) |
| Media queries | No | Yes |
| Animations | No | Yes |
| Gradients | No | Yes |
| Complex selectors | No | Yes (parent hover targeting children) |
| SVG styles (shape blocks) | `styles.svg` object | Yes |

**Rules:**
1. Put basic properties in BOTH `styles` and `css`
2. The `css` attribute contains only base styles - **no hover states or transitions** (those are generated by the plugin from the `styles` object)
3. CSS properties in the `css` string must be **alphabetically sorted**
4. Pseudo-elements (::before, ::after), media queries, animations, and parent-child hover selectors go in `css` only
5. Parent hover targeting children is written in the child's `css`: `.gb-element-parent:hover .gb-text-child{...}`

---

## Hover Effects

Hover states and transitions are managed by the `styles` object in GenerateBlocks V2. The plugin generates the hover CSS automatically. **Do NOT write hover/transition rules in the `css` attribute** for individual block states.

The exception is **parent hover affecting children** - these compound selectors must be written in the child's `css` attribute.

### Parent Hover Affecting Child (in child's `css`)

```css
/* Written in the child block's css attribute */
.gb-element-card001:hover .gb-shape-icon001a{background-color:#c0392b;color:white;transform:scale(1.05) rotate(-3deg)}
.gb-element-card001:hover .gb-text-title001{color:#c0392b}
.gb-element-card001:hover .gb-text-arrow001 svg{transform:translateX(4px)}
```

**Note:** The parent selector uses the parent's block type prefix (`gb-element-` for element blocks).

---

## Transition Patterns

Transitions are managed by the `styles` object and generated by the plugin. **Do NOT add transitions to the `css` attribute.**

The only exception is transitions on child elements targeted by parent hover selectors (written in the child's `css`).

---

## Pseudo-Elements

### Animated Underline (::after)

```css
.gb-text-card001::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#c0392b;transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)}.gb-text-card001:hover::after{transform:scaleX(1)}
```

### Decorative Border (::before)

```css
.gb-element-quote001::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:#c0392b}
```

### Background Gradient Overlay (::before)

```css
.gb-element-hero001::before{content:'';position:absolute;top:0;right:0;width:60%;height:100%;background:radial-gradient(circle at 100% 0%, rgba(192, 57, 43, 0.2) 0%, transparent 60%);pointer-events:none}
```

### Stat Dividers (::after)

```css
.gb-element-stat001:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:40px;background:linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 50%, transparent 100%)}
```

---

## Gradient Patterns

### Linear Gradient Background

```css
background:linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)
```

### Radial Gradient Accent

```css
background:radial-gradient(circle at 100% 0%, rgba(192, 57, 43, 0.15) 0%, transparent 60%)
```

### Text Overlay Gradient

```css
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%)
```

### Border Gradient (Fake)

```css
.gb-element-card001{background:linear-gradient(white, white) padding-box, linear-gradient(135deg, #c0392b, #e74c3c) border-box;border:2px solid transparent}
```

---

## Box Shadows

### Subtle Elevation

```css
box-shadow:0 2px 4px rgba(0,0,0,0.1)
```

### Medium Elevation

```css
box-shadow:0 4px 12px rgba(0,0,0,0.15)
```

### Strong Elevation (Hover)

```css
box-shadow:0 20px 60px rgba(0,0,0,0.15)
```

### Colored Shadow

```css
box-shadow:0 4px 12px rgba(192,57,43,0.3)
```

### Inset Shadow

```css
box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)
```

---

## Button Patterns

**Text `<a>` blocks without icons** use `generateblocks/text`:

### Primary Button

```json
{
  "styles": {
    "display": "inline-flex",
    "alignItems": "center",
    "gap": "0.5rem",
    "padding": "0.875rem 1.75rem",
    "backgroundColor": "#c0392b",
    "color": "#ffffff",
    "borderRadius": "2rem",
    "fontSize": "1rem",
    "fontWeight": "600",
    "textDecoration": "none"
  },
  "css": ".gb-text-btn001{align-items:center;background-color:#c0392b;border-radius:2rem;color:#ffffff;display:inline-flex;font-size:1rem;font-weight:600;gap:0.5rem;padding:0.875rem 1.75rem;text-decoration:none}"
}
```

### Secondary Button

```css
.gb-text-btn002{align-items:center;background-color:transparent;border:2px solid #e5e5e5;border-radius:2rem;color:#0a0a0a;display:inline-flex;font-size:1rem;font-weight:600;gap:0.5rem;padding:0.875rem 1.75rem;text-decoration:none}
```

### Ghost Button (Dark BG)

```css
.gb-text-btn003{align-items:center;background-color:rgba(255,255,255,0.1);border-radius:0.5rem;color:#ffffff;display:inline-flex;font-size:0.9375rem;font-weight:600;gap:0.5rem;padding:0.75rem 1.5rem;text-decoration:none}
```

### Button with Icon (uses `generateblocks/element` + inner blocks)

When a button has an SVG icon, use `generateblocks/element` with `tagName: "a"` as the wrapper containing `generateblocks/text` for the label and `generateblocks/shape` for the icon:

```html
<!-- wp:generateblocks/element {"uniqueId":"btn010","tagName":"a","htmlAttributes":[{"attribute":"href","value":"/services/"}],"styles":{"display":"inline-flex","alignItems":"center","gap":"0.75rem","padding":"0.75rem 1.25rem","fontSize":"0.9375rem","fontWeight":"600","color":"#0a0a0a","border":"2px solid #e5e5e5","borderRadius":"2rem","textDecoration":"none"},"css":".gb-element-btn010{align-items:center;border:2px solid #e5e5e5;border-radius:2rem;color:#0a0a0a;display:inline-flex;font-size:0.9375rem;font-weight:600;gap:0.75rem;padding:0.75rem 1.25rem;text-decoration:none}"} -->
<a class="gb-element gb-element-btn010" href="/services/">
    <!-- wp:generateblocks/text {"uniqueId":"btn010a","tagName":"span","styles":{},"css":""} -->
    <span class="gb-text gb-text-btn010a">View all services</span>
    <!-- /wp:generateblocks/text -->
    <!-- wp:generateblocks/shape {"uniqueId":"btn010b","styles":{"display":"inline-flex","svg":{"width":"1rem","height":"1rem","stroke":"currentColor","fill":"none"}},"css":".gb-shape-btn010b{display:inline-flex}.gb-shape-btn010b svg{fill:none;height:1rem;stroke:currentColor;width:1rem}"} -->
    <span class="gb-shape gb-shape-btn010b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
    <!-- /wp:generateblocks/shape -->
</a>
<!-- /wp:generateblocks/element -->
```

**Rule:** Plain text buttons = `generateblocks/text`. Buttons with icons = `generateblocks/element` wrapping text + shape blocks.

**Note on transitions:** The live site uses `transition:all 0.3s` in button `css` for smooth hover effects. While the plugin can generate transitions from the `styles` object, including `transition` in the `css` attribute for buttons is a valid pattern seen in production.

---

## Card Patterns

### Basic Card (Element block wrapping inner blocks)

```css
.gb-element-card001{background-color:white;border:1px solid transparent;border-radius:1rem;display:flex;flex-direction:column;padding:2rem;text-decoration:none}
```

Hover states (lift, shadow) are managed by the `styles` object.

### Card with Animated Underline (::after in `css`)

Pseudo-elements are one of the exceptions that go in the `css` attribute:

```css
.gb-element-card001{background-color:white;border-radius:1rem;display:flex;flex-direction:column;padding:2rem;position:relative;text-decoration:none}.gb-element-card001::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#c0392b;transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)}.gb-element-card001:hover::after{transform:scaleX(1)}
```

**Note:** The `::after` pseudo-element and its hover state are written in `css` since the plugin cannot generate these from the `styles` object.

### Featured Dark Card

```css
.gb-element-feat001{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);min-height:26rem;position:relative;display:flex;flex-direction:column;gap:1rem;border-radius:1rem;padding:2rem}.gb-element-feat001::before{content:'';position:absolute;top:0;right:0;width:60%;height:100%;background:radial-gradient(circle at 100% 0%, rgba(192, 57, 43, 0.2) 0%, transparent 60%);pointer-events:none}.gb-element-feat001>*{position:relative;z-index:1}
```

---

## Icon Container Patterns

Icons use `generateblocks/shape` blocks. Use `styles.svg` for SVG-specific properties.

### Basic Icon Box (Shape block)

```css
.gb-shape-icon001{align-items:center;background-color:#f5f5f3;border-radius:1rem;color:#c0392b;display:flex;height:3.5rem;justify-content:center;width:3.5rem}.gb-shape-icon001 svg{fill:none;height:1.5rem;stroke:currentColor;width:1.5rem}
```

### Icon with Parent Hover (in shape's `css`)

```css
.gb-shape-icon001{align-items:center;background-color:#f5f5f3;border-radius:1rem;color:#c0392b;display:flex;height:3.5rem;justify-content:center;width:3.5rem}.gb-shape-icon001 svg{fill:none;height:1.5rem;stroke:currentColor;width:1.5rem}.gb-element-card001:hover .gb-shape-icon001{background-color:#c0392b;color:white;transform:scale(1.05) rotate(-3deg)}
```

### Social Icon Button

```css
.gb-text-social001{align-items:center;background-color:rgba(255,255,255,0.1);border-radius:50%;color:#ffffff;display:flex;font-size:1.25rem;height:2.5rem;justify-content:center;text-decoration:none;width:2.5rem}
```

---

## Badge Patterns

### Absolute Position Badge

```css
.gb-text-badge001{position:absolute;top:1rem;right:1rem;padding:0.25rem 0.625rem;font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;background-color:#c0392b;color:white;border-radius:2rem}
```

### Inline Badge

```css
.gb-text-badge002{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;background:#16a34a;border-radius:2rem;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:white}
```

### Status Indicator

```css
.gb-text-status001{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background-color:#f5f5f3;border-radius:2rem;font-size:0.875rem;font-weight:600}.gb-text-status001::before{content:'';width:8px;height:8px;background-color:#22c55e;border-radius:50%}
```

---

## Animation Patterns

### Fade In

```css
.gb-element-anim001{animation:fadeIn 0.6s ease-out both}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
```

### Staggered Fade In

```css
.gb-element-anim002{animation:fadeIn 0.6s ease-out 0.15s both}
.gb-element-anim003{animation:fadeIn 0.6s ease-out 0.3s both}
```

### Pulse

```css
.gb-shape-pulse001{animation:pulse 2s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
```

---

## Focus States (Accessibility)

### Button Focus

```css
.gb-text-btn001:focus{outline:2px solid #c0392b;outline-offset:2px}
```

### Combined Hover/Focus

```css
.gb-text-btn001:is(:hover,:focus){background-color:#a33024;transform:translateY(-2px)}
```

### Focus Visible (Keyboard Only)

```css
.gb-text-link001:focus-visible{outline:2px solid #c0392b;outline-offset:2px}
```
