Most Popular CSS Effects (Page 24)

Live preview Badges

Wiggle FX Badge

Animated badge that wiggles side-to-side gently.

#animation #gradient #transform

Live preview Badges

Galaxy Cosmic Badge

Cosmic purple badge with shimmering gradient haze.

#animation #gradient #shadow

Live preview Badges

Galaxy Meteor Badge

Meteor-streak badge with animated tail across dark sky.

#animation #gradient #transform

Live preview Badges

Galaxy Nebula Badge

Purple nebula cloud badge with cosmic haze.

#gradient #shadow #border

Live preview Badges

Galaxy Orbit Badge

Badge with a small dot orbiting around it.

#animation #gradient #transform

Live preview Badges

Galaxy Stars Badge

Deep-space dark badge with twinkling starfield.

#gradient #shadow #border

Live preview Badges

Garden Flower Badge

Flower-shaped badge with rounded petals around text.

#gradient #shadow #border

Live preview Badges

Garden Ladybug Badge

Ladybug-red badge with black polka-dot speckles.

#gradient #shadow #border

Live preview Badges

Blue Glass Badge

Frosted blue glass badge with strong backdrop blur.

#shadow #border #filter

Live preview Badges

Dark Glass Badge

Dark frosted glass badge for dark mode UIs.

#shadow #border #filter

Live preview Badges

Frost Textured Glass Badge

Heavy frost texture on glass badge.

#shadow #border #filter

Live preview Badges

Light Glass Badge

Bright white frosted glass badge.

#shadow #border #filter

Live preview Badges

Purple Glass Badge

Frosted purple glass badge with luminous edge.

#shadow #border #filter

Live preview Badges

Aurora Gradient Pill

Three-color aurora gradient from cyan to violet.

#gradient #shadow

Live preview Badges

Berry Gradient Pill

Berry gradient from red to purple.

#gradient #shadow

Live preview Badges

Candy Gradient Pill

Sweet candy gradient from pink to purple.

#gradient #shadow

Live preview Badges

Citrus Gradient Pill

Fresh citrus gradient from yellow to green.

#gradient #shadow

Live preview Badges

Flame Gradient Pill

Hot flame gradient from orange to red.

#gradient #shadow

Live preview Badges

Forest Gradient Pill

Two-color forest gradient from green to teal.

#gradient #shadow

Live preview Badges

Grape Gradient Pill

Purple-to-pink grape gradient pill.

#gradient #shadow

Live preview Badges

Mint Gradient Pill

Refreshing mint gradient from teal to green.

#gradient #shadow

Live preview Badges

Ocean Gradient Pill

Two-color ocean gradient from blue to cyan.

#gradient #shadow

Live preview Badges

Rainbow Animated Pill

Full rainbow gradient that shifts colors continuously.

#animation #gradient #shadow

Live preview Badges

Sky Indigo Gradient Pill

Sky-to-indigo gradient pill.

#gradient #shadow

Live preview Badges

Sunset Gradient Pill

Two-color sunset gradient from red to yellow.

#gradient #shadow

Live preview Badges

Has-Selector Filter Chips

Checked chips restyle themselves and the group header count reacts through :has().

#border #transform #has-selector

Live preview Badges

Autumn Holiday Badge

Autumn-themed badge with warm orange and brown.

#gradient #shadow #border

Live preview Badges

Birthday Badge

Birthday celebration badge with festive colors.

#gradient #shadow #border

Live preview Badges

Christmas Holiday Badge

Christmas-themed badge with red and green colors.

#gradient #shadow #border

Live preview Badges

Easter Holiday Badge

Easter-themed badge with pastel colors.

#gradient #shadow #border

Live preview Badges

New Year Holiday Badge

New year badge with celebratory gold and shimmer.

#gradient #shadow #border

Live preview Badges

Spring Holiday Badge

Spring-themed badge with fresh green and pink.

#gradient #shadow #border

Live preview Badges

Summer Holiday Badge

Summer-themed badge with sunny yellow and orange.

#gradient #shadow #border

Live preview Badges

Valentine Holiday Badge

Valentine's day badge with pink and red colors.

#gradient #shadow #border

Live preview Badges

Winter Holiday Badge

Winter-themed badge with icy blue gradient.

#gradient #shadow #border

Live preview Badges

Holographic Badge

Holographic badge with animated rainbow shimmer.

#animation #gradient #shadow

Live preview Badges

Hot Flame Badge

Red-orange badge with a flickering flame-like glow.

#animation #gradient #transform

Live preview Badges

Iridescent Badge

Iridescent badge with shifting pastel shimmer.

#animation #gradient #shadow

Live preview Badges

Folded Label

Label with folded corner effect on the right side.

Live preview Badges

Language C Badge

C language badge with dark blue system-level styling.

#gradient #shadow #border

Live preview Badges

Language C++ Badge

C++ language badge with blue system-language styling.

#gradient #shadow #border

Live preview Badges

Language C# Badge

C-sharp language badge with purple .NET styling.

#gradient #shadow #border

Live preview Badges

Language Go Badge

Go language badge with mascot-turquoise styling.

#gradient #shadow #border

Live preview Badges

Language HTML Badge

HTML language badge with orange tag-bracket styling.

#gradient #shadow #border

Live preview Badges

Language JS Badge

JavaScript language badge with yellow square JS marker.

#gradient #shadow #border

Live preview Badges

Language Kotlin Badge

Kotlin language badge with diagonal-split purple/orange.

#gradient #shadow #border

Live preview Badges

Language PHP Badge

PHP language badge with indigo elephant styling.

#gradient #shadow #border

Live preview Badges

Language Python Badge

Python language badge with two-tone blue-yellow styling.

#gradient #shadow #border

Live preview Badges

Language Ruby Badge

Ruby language badge with gem-stone red styling.

#gradient #shadow #border

Live preview Badges

Language Rust Badge

Rust language badge with gear-and-crab orange styling.

#gradient #shadow #border

Live preview Badges

Language SQL Badge

SQL language badge with database-cylinder styling.

#gradient #shadow #border

Live preview Badges

Language Swift Badge

Swift language badge with bird-flight orange styling.

#gradient #shadow #border

Live preview Badges

Language TS Badge

TypeScript language badge with blue TS marker.

#gradient #shadow #border

Live preview Badges

Limited Time Badge

Urgent limited-time badge with strobe animation.

#animation #transform #shadow

Live preview Badges

Material Dark Badge

Material design dark badge for dark mode UIs.

#shadow

Live preview Badges

Material Error Badge

Material error badge with red color.

#shadow

Live preview Badges

Material Flat Badge

Material design flat badge with subtle elevation.

#shadow

Live preview Badges

Material Outlined Badge

Material design outlined badge with thin border.

#border

Live preview Badges

Material Pill Badge

Material design pill-shaped badge with elevation.

#shadow

Live preview Badges

Material Raised Badge

Material design raised badge with elevation shadow.

#shadow

Live preview Badges

Material Success Badge

Material success badge with green tint.

#shadow

Live preview Badges

Material Text Badge

Material design text-only badge with colored text.

Live preview Badges

Material Warning Badge

Material warning badge with amber color.

#shadow

Live preview Badges

Bronze Medal Badge

Simple bronze medal without ribbon tails.

#gradient #shadow #border

Live preview Badges

Gold Medal Badge

Simple gold medal without ribbon tails.

#gradient #shadow #border

Live preview Badges

Silver Medal Badge

Simple silver medal without ribbon tails.

#gradient #shadow #border

Live preview Badges

Minimal Dot Badge

Ultra-minimal badge with just a colored dot.

Live preview Badges

Minimal Monospace Badge

Minimal monospace badge for technical contexts.

Live preview Badges

Minimal Round Badge

Minimal circular badge with number.

#border

Live preview Badges

Minimal Tag Badge

Minimal tag-style badge with hash prefix.

#border

Live preview Badges

Minimal Underline Badge

Minimal text badge with colored underline.

#border

Live preview Badges

Mirror Badge

Mirror-finish badge with reflective gradient.

#gradient #shadow #border

Live preview Badges

Modern Pill Badge

Modern minimalist pill badge with subtle shadow.

#shadow

Live preview Badges

Neon Pink Badge

Dark badge with glowing pink neon glow.

#animation #transform #shadow

Live preview Badges

Colored Neumorphic Badge

Neumorphic badge with colored accent.

#shadow

Live preview Badges

Dark Neumorphic Badge

Dark mode neumorphic badge with subtle shadows.

#shadow

Live preview Badges

Neumorphic Flat Badge

Soft neumorphic badge with dual shadows.

#shadow

Live preview Badges

Pink Neumorphic Badge

Pink-tinted neumorphic badge.

#shadow

Live preview Badges

Round Neumorphic Badge

Fully circular neumorphic badge.

#shadow

Live preview Badges

Notification Count 1

Red circular notification count badge showing number one.

#shadow #border

Live preview Badges

Notification 99+

Notification badge showing 99+ with red pulse.

#animation #gradient #shadow

Live preview Badges

Bouncing Notification

Notification badge with playful bounce animation.

#animation #transform #shadow

Live preview Badges

Counter Badge

Dark counter badge for shopping cart counts.

#shadow #border

Live preview Badges

Unread Indicator

Small unread dot indicator for messaging interfaces.

#animation #shadow

Live preview Badges

Ocean Deep Badge

Deep-ocean navy badge with dark abyss feel.

#gradient #shadow #border

Live preview Badges

Ocean Foam Badge

Light sea-foam badge with airy pale-cyan styling.

#gradient #shadow #border

Live preview Badges

Ocean Wave Badge

Blue ocean badge with animated wavy accent line.

#animation #gradient #shadow

Live preview Badges

OKLCH Tone Scale Badges

Six badges built from one hue by walking OKLCH lightness in even steps.

#oklch #palette #design-tokens

Live preview Badges

Outline Amber Pill

Transparent pill with amber border and amber text.

#border

Live preview Badges

Outline Blue Pill

Transparent pill with blue border and blue text.

#border

Live preview Badges

Outline Green Pill

Transparent pill with green border and green text.

#border

Live preview Badges

Outline Purple Pill

Transparent pill with purple border and text.

#border

Live preview Badges

Outline Red Pill

Transparent pill with red border and red text.

#border

Live preview Badges

Pastel Amber Pill

Soft pastel amber pill.

#border

Live preview Badges

Pastel Blue Pill

Soft pastel blue pill.

#border

Live preview Badges

Pastel Cyan Pill

Soft pastel cyan pill.

#border

Browse by category

Popular tags