> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Chalarangelo/30-seconds-of-code/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Visual Styling

> Creative styling techniques using modern CSS features to enhance visual design.

# CSS Visual Styling

Modern CSS provides powerful capabilities for creating visually engaging interfaces. This section explores techniques for styling elements that go beyond basic colors and borders.

## Core Visual Concepts

### Gradient Effects

Gradients add depth and visual interest to designs. CSS supports linear and radial gradients that can be applied to backgrounds, borders, and even text.

**Text gradients** create eye-catching typography:

```css theme={null}
.gradient-text {
  background: linear-gradient(to right, #009FFF, #ec2F4B);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
```

The process:

1. Create a gradient background
2. Make the text fill transparent
3. Clip the background to the text shape

### Shadows and Depth

Shadows create visual hierarchy and depth in your designs. Beyond the standard `box-shadow`, you can create dynamic shadows that match element colors.

**Dynamic shadows** inherit the element's background:

```css theme={null}
.dynamic-shadow {
  position: relative;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
}

.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}
```

This creates a shadow that matches the element's gradient or image background.

### Shapes with CSS

While SVG is often preferred for complex shapes, CSS can create simple geometric shapes efficiently:

* **Circles**: `border-radius: 50%`
* **Triangles**: Using borders with transparent sides
* **Ellipses**: `border-radius` with different horizontal/vertical values

### Custom Scrollbars

Scrollbar styling enhances the overall design consistency. Note that this only works in WebKit-based browsers (Chrome, Edge, Safari).

```css theme={null}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #4a7856;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #70bceb;
  border-radius: 12px;
}
```

## Visual Effects Techniques

### Overlays

Overlays create focus and hierarchy by dimming background content:

* **Image overlays**: Darken images to improve text readability
* **Modal backdrops**: Semi-transparent backgrounds behind dialogs
* **Hover states**: Reveal additional information on interaction

### Filters

CSS filters modify element rendering:

* `blur()` - Creates soft, out-of-focus effects
* `brightness()` - Adjusts lightness
* `contrast()` - Enhances or reduces contrast
* `grayscale()` - Converts to black and white
* `drop-shadow()` - Creates shadows that follow alpha channels

Filters can be combined:

```css theme={null}
.filtered {
  filter: brightness(1.1) contrast(1.2) saturate(1.3);
}
```

### Blend Modes

Blend modes control how elements blend with layers beneath them:

```css theme={null}
.blended {
  mix-blend-mode: multiply; /* multiply | screen | overlay | etc. */
}
```

Useful for creating sophisticated color interactions and effects.

## Design Patterns

### Cards and Containers

Well-styled cards create visual organization:

```css theme={null}
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
```

### Borders and Outlines

Creative border techniques:

* **Gradient borders**: Using background gradients with nested elements
* **Nested border radius**: Calculating inner radius for nested rounded elements
* **Partial borders**: Using pseudo-elements for borders on specific sides

### Background Patterns

Repeating gradients create patterns without images:

```css theme={null}
.striped {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}
```

## Browser Compatibility

Most visual styling features have excellent modern browser support:

* **Gradients**: Fully supported in all modern browsers
* **Filters**: Widely supported, may need prefixes for older browsers
* **Blend modes**: Good support in modern browsers
* **Custom scrollbars**: WebKit only (Chrome, Safari, Edge)
* **Backdrop filters**: Good modern support, may need prefixes

## Performance Considerations

1. **Use transforms over positioning** for animations (GPU accelerated)
2. **Limit filter complexity** on large elements
3. **Optimize gradient complexity** - simpler gradients perform better
4. **Be cautious with blur** on large areas
5. **Test on lower-end devices** to ensure smooth performance

## Best Practices

1. **Maintain visual hierarchy** - Use styling to guide user attention
2. **Ensure sufficient contrast** - Especially for text readability
3. **Consider accessibility** - Some effects may impact screen readers
4. **Provide fallbacks** - For features with limited browser support
5. **Use CSS variables** - For consistent theming and easier maintenance
6. **Test across browsers** - Visual effects may render differently

## Next Steps

Explore practical [visual styling examples](/css/visual/examples) to see these techniques applied in real-world scenarios.