> ## 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 Examples

> Real-world examples of visual styling techniques with complete code.

# CSS Visual Styling Examples

This page demonstrates visual styling techniques using modern CSS. Each example includes complete code that you can adapt for your projects.

## Gradient Text

Create eye-catching text with gradient fills using modern CSS.

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

**How it works:**

1. Define a gradient background using `linear-gradient()`
2. Set text fill color to transparent with `-webkit-text-fill-color`
3. Clip the background to text shape using `background-clip: text`
4. Include WebKit prefix for broader compatibility

**Visual result:** Text appears filled with a gradient from blue (#009FFF) to pink (#ec2F4B), flowing from left to right.

**Browser support:** Works in all WebKit browsers (Chrome, Edge, Safari). Limited support in Firefox.

## Custom Scrollbar

Customize scrollbar styling to match your design system.

```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;
}
```

**How it works:**

* `::-webkit-scrollbar` sets the scrollbar width
* `::-webkit-scrollbar-track` styles the scrollbar background (green)
* `::-webkit-scrollbar-thumb` styles the draggable element (blue)
* `border-radius` creates rounded corners

**Visual result:** A thin (8px) scrollbar with a green track and blue thumb, both with rounded edges.

**Browser support:** WebKit-based browsers only (Chrome, Edge, Safari). Not supported in Firefox or on standards track.

## Dynamic Shadow

Create shadows that inherit the element's background colors.

```css theme={null}
.container {
  z-index: 1;
}

.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;
}
```

**How it works:**

1. Element has `position: relative` with a gradient background
2. `::after` pseudo-element positioned absolutely, filling the same space
3. `background: inherit` copies the parent's gradient
4. Offset downward with `top: 0.5rem`
5. `filter: blur()` creates the shadow effect
6. `opacity: 0.7` softens the shadow
7. `z-index: -1` positions shadow behind parent

**Visual result:** A soft, blurred shadow beneath the element that matches its gradient colors (purple to teal).

**Important:** The container (not the element itself) needs `z-index: 1` for proper stacking context.

## CSS Shapes

Create geometric shapes using pure CSS.

### Circle and Ellipse

```css theme={null}
.circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #5394fd;
}

.ellipse {
  width: 128px;
  height: 64px;
  border-radius: 64px / 32px;
  background: #5394fd;
}
```

**How it works:**

* **Circle**: Equal width and height with `border-radius: 50%`
* **Ellipse**: Different width/height with radius matching half the dimensions

**Visual result:** A perfect blue circle (64px) and a horizontal blue ellipse (128px × 64px).

### Triangles

Create triangles using CSS borders.

```css theme={null}
.triangle-down {
  width: 0;
  height: 0;
  border-top: 32px solid #5394fd;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
}

.triangle-up {
  width: 0;
  height: 0;
  border-bottom: 32px solid #5394fd;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
}

.triangle-left {
  width: 0;
  height: 0;
  border-right: 32px solid #5394fd;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  border-left: 32px solid #5394fd;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
}
```

**How it works:**

1. Set width and height to 0
2. Create borders on all sides
3. The border opposite to the desired direction gets the color
4. Adjacent borders are transparent
5. Border width determines triangle size

**Visual result:** Blue triangles pointing in each direction (down, up, left, right).

### Rectangle

```css theme={null}
.square {
  width: 64px;
  height: 64px;
  background: #5394fd;
}

.rectangle {
  width: 128px;
  height: 64px;
  background: #5394fd;
}
```

**Visual result:** Simple blue shapes - a square (64px × 64px) and a rectangle (128px × 64px).

## Image Overlay on Hover

Create an interactive overlay effect when hovering over images.

```html theme={null}
<figure class="hover-img">
  <img src="https://picsum.photos/id/200/440/320.jpg"/>
  <figcaption>
    <h3>Lorem <br/>Ipsum</h3>
  </figcaption>
</figure>
```

```css theme={null}
.hover-img {
  background-color: #000;
  color: #fff;
  display: inline-block;
  margin: 8px;
  max-width: 320px;
  min-width: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.hover-img::before,
.hover-img::after {
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 32px solid rgba(0, 0, 0, 0.5);
  border-bottom: 32px solid rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
  transform: scaleY(2);
}

.hover-img img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hover-img:hover::before,
.hover-img:hover::after {
  transform: scale(1);
  opacity: 1;
}

.hover-img:hover > img {
  opacity: 0.7;
}

.hover-img:hover figcaption {
  opacity: 1;
}
```

**How it works:**

1. `<figure>` contains image and caption with `position: relative`
2. `::before` and `::after` create overlay bars, initially scaled and transparent
3. `<figcaption>` positioned absolutely, flexbox-centered, initially transparent
4. On hover:
   * Overlay pseudo-elements scale to normal size and become visible
   * Image opacity reduces to 0.7
   * Caption fades in with slight delay

**Visual result:** When hovering over the image, dark overlay bars appear with an animated scaling effect, the image dims slightly, and white text fades in centered over the image.

## Filters and Effects

### Blur Effect

```css theme={null}
.blurred {
  filter: blur(4px);
}
```

**Visual result:** Element appears out of focus with a 4-pixel blur radius.

### Combined Filters

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

**Visual result:** Image appears slightly brighter, with enhanced contrast and more vivid colors.

### Grayscale

```css theme={null}
.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0%);
}
```

**Visual result:** Image displays in black and white, returning to full color on hover.

## Practical Tips

1. **Test visual effects across browsers** - Rendering can vary slightly
2. **Provide fallbacks** - Some effects have limited browser support
3. **Consider performance** - Complex filters on large elements can impact frame rate
4. **Ensure accessibility** - Maintain sufficient contrast ratios
5. **Use transitions** - Smooth changes enhance user experience
6. **Optimize images** - Compress images before applying effects

These visual styling techniques can dramatically enhance the look and feel of your interfaces when applied thoughtfully.