Skip to main content

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

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

.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. 
<figure class="hover-img">
  <img src="https://picsum.photos/id/200/440/320.jpg"/>
  <figcaption>
    <h3>Lorem <br/>Ipsum</h3>
  </figcaption>
</figure>

.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

.blurred {
  filter: blur(4px);
}
Visual result: Element appears out of focus with a 4-pixel blur radius.

​
Combined Filters

.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

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

Build docs developers (and LLMs) love

Get started for freeTalk to us