Skip to main content

Backgrounds, borders & shadows

In this chapter, you learn how to style backgrounds, borders, and shadows with Tailwind CSS.

Background color​

<div class="bg-white">White</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-transparent">Transparent</div>

Background images​

Gradients​

<!-- Linear gradient -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">
  Gradient to the right
</div>

<!-- Specifying the direction -->
<div class="bg-linear-to-t">To the top</div>
<div class="bg-linear-to-tr">To the top right</div>
<div class="bg-linear-to-r">To the right</div>
<div class="bg-linear-to-br">To the bottom right</div>
<div class="bg-linear-to-b">To the bottom</div>
<div class="bg-linear-to-bl">To the bottom left</div>
<div class="bg-linear-to-l">To the left</div>
<div class="bg-linear-to-tl">To the top left</div>

Three-color gradients​

<div class="bg-linear-to-r from-pink-500 via-red-500 to-yellow-500">
  Three-color gradient
</div>

Gradient start and end positions​

<div class="bg-linear-to-r from-blue-500 from-10% via-purple-500 via-50% to-pink-500 to-90%">
  A gradient with specified positions
</div>

Image backgrounds​

<div class="bg-[url('/image.jpg')]">
  Background image
</div>

Background size, position & repeat​

Size​

<div class="bg-cover">Cover (allows overflow)</div>
<div class="bg-contain">Contain (fits inside)</div>
<div class="bg-auto">Auto</div>

Position​

<div class="bg-center">Center</div>
<div class="bg-top">Top</div>
<div class="bg-right">Right</div>
<div class="bg-bottom">Bottom</div>
<div class="bg-left">Left</div>
<div class="bg-top-left">Top left</div>

Repeat​

<div class="bg-repeat">Repeat</div>
<div class="bg-no-repeat">No repeat</div>
<div class="bg-repeat-x">Repeat horizontally only</div>
<div class="bg-repeat-y">Repeat vertically only</div>

Attachment​

<div class="bg-fixed">Fixed on scroll</div>
<div class="bg-local">Follows on scroll</div>
<div class="bg-scroll">Default</div>

Borders​

Width​

<div class="border">1px</div>
<div class="border-0">0px</div>
<div class="border-2">2px</div>
<div class="border-4">4px</div>
<div class="border-8">8px</div>

Individual sides​

<div class="border-t-2">Top</div>
<div class="border-r-2">Right</div>
<div class="border-b-2">Bottom</div>
<div class="border-l-2">Left</div>
<div class="border-x-2">Left and right</div>
<div class="border-y-2">Top and bottom</div>

Color​

<div class="border border-gray-300">Gray</div>
<div class="border border-blue-500">Blue</div>
<div class="border border-transparent">Transparent</div>

Style​

<div class="border border-solid">Solid</div>
<div class="border border-dashed">Dashed</div>
<div class="border border-dotted">Dotted</div>
<div class="border border-double">Double</div>
<div class="border-none">None</div>

Rounded corners (border-radius)​

Basics​

<div class="rounded-sm">Small radius</div>
<div class="rounded-md">Medium</div>
<div class="rounded-lg">Large</div>
<div class="rounded-xl">Larger</div>
<div class="rounded-2xl">Even larger</div>
<div class="rounded-3xl">Much larger</div>
<div class="rounded-4xl">Largest</div>
<div class="rounded-full">Circular</div>
<div class="rounded-none">None</div>
ClassSize
rounded-xs2px
rounded-sm4px
rounded-md6px
rounded-lg8px
rounded-xl12px
rounded-2xl16px
rounded-3xl24px
rounded-4xl32px
The scale was renamed in v4

In v4, the scales for rounded corners, shadows, and blur were shifted by one step and renamed. For example, v3's rounded becomes rounded-sm, and shadow becomes shadow-sm (likewise rounded-sm → rounded-xs and shadow-sm → shadow-xs). The bare rounded / shadow remain for backward compatibility, but this guide standardizes on the v4 names.

Individual corners​

<div class="rounded-t-lg">Top corners</div>
<div class="rounded-r-lg">Right corners</div>
<div class="rounded-b-lg">Bottom corners</div>
<div class="rounded-l-lg">Left corners</div>
<div class="rounded-tl-lg">Top left only</div>
<div class="rounded-tr-lg">Top right only</div>
<div class="rounded-br-lg">Bottom right only</div>
<div class="rounded-bl-lg">Bottom left only</div>

Shadows​

Box shadow​

<div class="shadow-xs">Small shadow</div>
<div class="shadow-sm">Standard shadow</div>
<div class="shadow-md">Medium</div>
<div class="shadow-lg">Large</div>
<div class="shadow-xl">Larger</div>
<div class="shadow-2xl">Largest</div>
<div class="shadow-none">None</div>

Inner shadow​

<div class="inset-shadow-sm">Inner shadow</div>

Shadow color​

<div class="shadow-lg shadow-blue-500/50">
  Blue shadow (50% opacity)
</div>
<div class="shadow-lg shadow-red-500/30">
  Red shadow (30% opacity)
</div>

Rings (outline)​

Handy for ring styles on focus.

<div class="ring-2 ring-blue-500">Blue ring</div>
<div class="ring-4 ring-offset-2 ring-blue-500">With offset</div>

Ring width​

<div class="ring-0">0px</div>
<div class="ring-1">1px</div>
<div class="ring-2">2px</div>
<div class="ring-3">3px (equivalent to v3's bare ring)</div>
<div class="ring-4">4px</div>
<div class="ring-8">8px</div>
<div class="ring">1px (default; changed from v3's 3px)</div>

Ring offset​

<div class="ring-2 ring-offset-2 ring-blue-500">
  2px gap from the ring
</div>
<div class="ring-2 ring-offset-4 ring-blue-500">
  4px gap from the ring
</div>
Dark mode and ring offset

The ring offset is filled with a solid white (#fff) by default. When the background is not white, or when supporting dark mode, do not forget to specify a ring-offset-color that matches the background, as in ring-offset-white dark:ring-offset-gray-900.

Inset ring​

<div class="ring-2 ring-inset ring-blue-500">
  Ring on the inside
</div>

Outline​

<button class="outline-2 outline-blue-500">
  Outline
</button>
<button class="outline-2 outline-offset-2 outline-blue-500">
  With offset
</button>

Dividers (Divide)​

Add dividers between child elements.

<div class="divide-y divide-gray-300">
  <div class="py-4">Item 1</div>
  <div class="py-4">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

<div class="flex divide-x divide-gray-300">
  <div class="px-4">Item 1</div>
  <div class="px-4">Item 2</div>
  <div class="px-4">Item 3</div>
</div>

Divider styles​

<div class="divide-y divide-dashed">Dashed</div>
<div class="divide-y divide-dotted">Dotted</div>

Practical examples​

Card component​

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
  <img src="..." class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-xl font-bold">Card title</h3>
    <p class="mt-2 text-gray-600">Description...</p>
  </div>
</div>

Input field​

<input
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg
         focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="Enter text"
/>

Button variations​

<!-- Solid -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md
               hover:bg-blue-600 hover:shadow-lg transition-all">
  Solid
</button>

<!-- Outline -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg
               hover:bg-blue-50 transition-colors">
  Outline
</button>

<!-- Ghost -->
<button class="px-4 py-2 text-blue-500 rounded-lg
               hover:bg-blue-50 transition-colors">
  Ghost
</button>

Hero section​

<section class="bg-linear-to-br from-blue-600 via-purple-600 to-pink-500
                text-white py-24 px-4">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl font-bold">Hero section</h1>
    <p class="mt-6 text-xl opacity-90">
      A section with a beautiful gradient background
    </p>
  </div>
</section>

List​

<ul class="bg-white rounded-lg shadow divide-y divide-gray-200">
  <li class="px-4 py-3 hover:bg-gray-50">Item 1</li>
  <li class="px-4 py-3 hover:bg-gray-50">Item 2</li>
  <li class="px-4 py-3 hover:bg-gray-50">Item 3</li>
</ul>

Summary​

  • bg-* for background color, bg-linear-to-* for gradients
  • border / border-* for borders
  • rounded-* for rounded corners
  • shadow-* for shadows
  • ring-* for focus rings
  • divide-* for dividers between child elements