color blur

Related Examples

• 
  Gradient Flip-Text Button with Hover Animation

  This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

  Author:
  SHARIFUL ISLAM

  5 months ago

  723
• 
  Modern Responsive Footer with Tailwind CSS

  This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

  Author:
  Ayyamperumal S

  5 months ago

  1.2k
• 
  Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface

  A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

  Author:
  Ayyamperumal S

  2 months ago

  705
• 
  SocialSphere: A Full-Stack Social Media Platform

  SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

  Author:
  Code Master(Mfuranziza Dusabe Hamza)

  2 months ago

  377
• 
  Hero Section

  Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

  Author:
  KULDEEP

  1 month ago

  308
• 
  Profile Card with Transparent

  Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

  Author:
  KULDEEP

  1 month ago

  145
• 
  Attractive Feature Section

  With Gradient Color 6 Features

  Author:
  KULDEEP

  3 weeks ago

  157
• 
  Powerful Website Features

  Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

  Author:
  KULDEEP

  3 weeks ago

  353
• 
  Elegant NavBar + Drawer

  A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

  Author:
  Nick Girga

  2 months ago

  472
• 
  Underline Gradient

  underlined gradient using background color

  Author:
  Nikolai

  1 year ago

  2.3k
• 
  google meet clone

  Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

  Author:
  Abhiraj

  6 months ago

  958
• 
  Responsive 3-Tier Pricing Card Section

  A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

  Author:
  Hamza Atig

  3 months ago

  293