Ki Brand Guidelines - v0 by Vercel

Creating Visually Appealing Blocks with Gradient and Depth Effects

Creating visually striking UI elements with gradient backgrounds and depth effects can significantly enhance your application's visual appeal. This guide will walk you through creating beautiful gradient blocks with 3D-like depth using modern CSS techniques.

Step-by-Step Guide to Creating Gradient Blocks with Depth

1. Understanding Gradient Types

There are three main types of CSS gradients you can use:

Linear Gradients: Transition colors in a straight line
Radial Gradients: Transition colors outward from a central point
Conic Gradients: Transition colors around a center point (like a color wheel)

2. Creating Basic Gradient Backgrounds

Linear Gradient

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>

Radial Gradient

.gradient-block {
  background: radial-gradient(circle at center, #86efac, #3b82f6, #9333ea);
}

With Tailwind CSS:

<div class="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-300 via-blue-500 to-purple-600"></div>

Conic Gradient

.gradient-block {
  background: conic-gradient(at top right, #c7d2fe, #fecaca, #fef9c3);
}

With Tailwind CSS:

<div class="bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-red-200 to-yellow-100"></div>

3. Adding Depth with Shadows

Basic Shadow

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500 shadow-lg"></div>

Layered Shadows for Enhanced Depth

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500 shadow-[0_10px_20px_rgba(0,0,0,0.15),_0_20px_60px_rgba(0,0,0,0.1)]"></div>

4. Creating Inner Shadows

Inner shadows add depth by making the element appear concave:

.gradient-block {
  background: linear-gradient(to right, #ec4899, #f97316);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.gradient-block::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

With Tailwind CSS:

<div class="relative overflow-hidden bg-gradient-to-r from-pink-500 to-orange-500 shadow-lg">
  <div class="absolute inset-0 shadow-[inset_0_2px_10px_rgba(0,0,0,0.3)]"></div>
</div>

5. Adding 3D Transforms

Transform properties can create a 3D effect:

.gradient-block-container {
  perspective: 1000px;
}

.gradient-block {
  background: linear-gradient(to right, #06b6d4, #3b82f6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: rotateX(2deg) rotateY(2deg);
  transition: transform 0.3s ease;
}

.gradient-block:hover {
  transform: rotateX(0) rotateY(0);
}

With Tailwind CSS:

<div class="perspective-[1000px]">
  <div class="bg-gradient-to-r from-cyan-500 to-blue-500 shadow-lg transform rotate-x-2 rotate-y-2 transition-transform duration-300 hover:rotate-x-0 hover:rotate-y-0"></div>
</div>

6. Advanced Techniques

Glassmorphism Effect

.glass-container {
  background: linear-gradient(to right, #a855f7, #ec4899);
  padding: 2rem;
  border-radius: 0.75rem;
}

.glass-element {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 rounded-xl">
  <div class="bg-white/20 backdrop-blur-lg shadow-lg border border-white/30 rounded-lg"></div>
</div>

Animated Gradient

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(to right, #a855f7, #ec4899, #ef4444);
  background-size: 200% 200%;
  animation: gradient-animation 6s ease infinite;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS (requires custom animation in your tailwind.config.js):

<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 animate-gradient-x shadow-lg"></div>

Gradient Border

.gradient-border {
  padding: 2px;
  border-radius: 0.75rem;
  background: linear-gradient(to right, #ec4899, #ef4444, #eab308);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.gradient-border-inner {
  background: white;
  border-radius: calc(0.75rem - 2px);
  height: 100%;
}

With Tailwind CSS:

<div class="p-[2px] rounded-xl bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 shadow-lg">
  <div class="w-full h-full rounded-[10px] bg-white"></div>
</div>

Tips for Creating Effective Gradient and Depth Effects

Use complementary colors for gradients to create visually appealing transitions
Adjust shadow opacity to control the intensity of the depth effect
Combine multiple shadows at different offsets for more realistic depth
Use subtle transforms (1-3 degrees) to create a 3D effect without being distracting
Consider adding hover animations to enhance interactivity
Test on different backgrounds to ensure your gradient and shadow effects work in various contexts
Use border-radius to soften the edges and enhance the 3D appearance

The interactive demo in the code project allows you to experiment with different gradient types, colors, and depth effects to create your perfect design.

Creating Visually Appealing Blocks with Gradient and Depth Effects

Step-by-Step Guide to Creating Gradient Blocks with Depth

1. Understanding Gradient Types

There are three main types of CSS gradients you can use:

Linear Gradients: Transition colors in a straight line
Radial Gradients: Transition colors outward from a central point
Conic Gradients: Transition colors around a center point (like a color wheel)

2. Creating Basic Gradient Backgrounds

Linear Gradient

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>

Radial Gradient

.gradient-block {
  background: radial-gradient(circle at center, #86efac, #3b82f6, #9333ea);
}

With Tailwind CSS:

<div class="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-300 via-blue-500 to-purple-600"></div>

Conic Gradient

.gradient-block {
  background: conic-gradient(at top right, #c7d2fe, #fecaca, #fef9c3);
}

With Tailwind CSS:

<div class="bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-red-200 to-yellow-100"></div>

3. Adding Depth with Shadows

Basic Shadow

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500 shadow-lg"></div>

Layered Shadows for Enhanced Depth

.gradient-block {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-blue-500 to-purple-500 shadow-[0_10px_20px_rgba(0,0,0,0.15),_0_20px_60px_rgba(0,0,0,0.1)]"></div>

4. Creating Inner Shadows

Inner shadows add depth by making the element appear concave:

.gradient-block {
  background: linear-gradient(to right, #ec4899, #f97316);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.gradient-block::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

With Tailwind CSS:

<div class="relative overflow-hidden bg-gradient-to-r from-pink-500 to-orange-500 shadow-lg">
  <div class="absolute inset-0 shadow-[inset_0_2px_10px_rgba(0,0,0,0.3)]"></div>
</div>

5. Adding 3D Transforms

Transform properties can create a 3D effect:

.gradient-block-container {
  perspective: 1000px;
}

.gradient-block {
  background: linear-gradient(to right, #06b6d4, #3b82f6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: rotateX(2deg) rotateY(2deg);
  transition: transform 0.3s ease;
}

.gradient-block:hover {
  transform: rotateX(0) rotateY(0);
}

With Tailwind CSS:

<div class="perspective-[1000px]">
  <div class="bg-gradient-to-r from-cyan-500 to-blue-500 shadow-lg transform rotate-x-2 rotate-y-2 transition-transform duration-300 hover:rotate-x-0 hover:rotate-y-0"></div>
</div>

6. Advanced Techniques

Glassmorphism Effect

.glass-container {
  background: linear-gradient(to right, #a855f7, #ec4899);
  padding: 2rem;
  border-radius: 0.75rem;
}

.glass-element {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

With Tailwind CSS:

<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 rounded-xl">
  <div class="bg-white/20 backdrop-blur-lg shadow-lg border border-white/30 rounded-lg"></div>
</div>

Animated Gradient

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(to right, #a855f7, #ec4899, #ef4444);
  background-size: 200% 200%;
  animation: gradient-animation 6s ease infinite;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

With Tailwind CSS (requires custom animation in your tailwind.config.js):

<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 animate-gradient-x shadow-lg"></div>

Gradient Border

.gradient-border {
  padding: 2px;
  border-radius: 0.75rem;
  background: linear-gradient(to right, #ec4899, #ef4444, #eab308);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.gradient-border-inner {
  background: white;
  border-radius: calc(0.75rem - 2px);
  height: 100%;
}

With Tailwind CSS:

<div class="p-[2px] rounded-xl bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 shadow-lg">
  <div class="w-full h-full rounded-[10px] bg-white"></div>
</div>

Tips for Creating Effective Gradient and Depth Effects

Use complementary colors for gradients to create visually appealing transitions
Adjust shadow opacity to control the intensity of the depth effect
Combine multiple shadows at different offsets for more realistic depth
Use subtle transforms (1-3 degrees) to create a 3D effect without being distracting
Consider adding hover animations to enhance interactivity
Test on different backgrounds to ensure your gradient and shadow effects work in various contexts
Use border-radius to soften the edges and enhance the 3D appearance

The interactive demo in the code project allows you to experiment with different gradient types, colors, and depth effects to create your perfect design.