Cómo Crear Contenedores con Efecto de Neón en CSS

Creo que uno de los aspectos más llamativos de mi página web a día de hoy (lo digo por si algún día cambio el diseño, que no creo, pero por si acaso) es ese efecto de Neón que uso para envolver algunos de los contenedores de la página.

Este tipo de efecto es bastante vistoso y le da a la página un rollo muy «cyberpunk», que bueno… pues es lo que yo quería lograr al crear este diseño, que la página se viera como muy moderna y vistosa. A gustos colores supongo, pero la verdad es que a mí me ha gustado bastante el resultado. Dejaré por aquí una foto del diseño actual por si acaso en el futuro lo cambio, así podrás ver a qué me refiero exactamente:

Así que nada, me apetecía escribir sobre cómo he logrado esto y algunos «truquitos» al respecto que creo que no mucha gente conoce (quédate hasta el final porque cada vez crearemos neones más locos); la verdad es que he indagado más en el tema de lo que me gustaría admitir porque no es la primera página con este tipo de diseño que he creado (me mola mucho este rollo, la verdad). Para variar me enrollo en la intro, ¡vamos allá!

Cómo Crear Contenedores con Efecto de Neón

La clave para crear los contenedores con efecto de Neón está en usar la orden de CSS box-shadow, solo que para lograr este efecto habrá que usarla con cierta gracia. Comenzaremos viendo su funcionamiento básico y luego ya entraré más en los «truquitos» que conozco.

Creando el Contenedor de Ejemplo en HTML

Comenzaré creando un contenedor básico en HTML con un párrafo para esta página que nos servirá para ver luego el efecto de CSS usando su selector.

<div class="neon-basico">
   <p>¡Hola!</p>
</div>

He añadido la clase «neon-basico» para luego poder aplicar los estilos a dicha clase para ahora dar el ejemplo, tu tendrás que añadir el selector CSS que se adapte a tu caso, ya sabes.

Cómo usar Box-shadow para crear el Efecto

.neon-basico {
   box-shadow: 0 0 7px 1px #FF1493;
   /* Es un color rosa estilo Neón */
}

Y este sería el resultado:

Creo que basta decir que el Neón no quedará demasiado bien si no tienes una página de tono oscuro como esta.

Ahora te explicaré mejor qué es cada parte del código «box-shadow: 0 0 7px 1px #FF1493;» para que luego tú puedas personalizarlo a tu gusto. Si te fijas justo después de «box-shadow:» hay 5 valores separados por un espacio, a eso me refiero:

• Primer valor desde la izquierda (0 en el ejemplo): Es para desplazar el Neón horizontalmente, yo lo dejo normalmente en 0 para que quede centrado. Si quieres moverlo a la izquierda tienes que poner un valor en px negativo, si quieres moverlo a la derecha pues un valor en px positivo.
• Segundo valor d este la izquierda (0): Para desplazar el Neón verticalmente, de nuevo me gusta ponerlo a 0 para que quede centrado. Es lo mismo que en el caso anterior, debes poner un valor en pixeles positivo o negativo, en este caso positivo lo desplazaría hacia arriba.

Un ejemplo para que lo veas en vivo:

.neon-basico-desplazado {
   box-shadow: 3px -2px 7px 1px #FF1493;
}

A mí la verdad es que no me gusta nada como queda desplazado, pero supongo que podría llegar a quedar bien según el diseño que se busque. A mí me gusta más que quede centrado, por lo que siempre dejo los 2 primeros valores en cero.

Veamos ahora qué hace el siguiente valor de la lista, el tercero desde la izquierda. Su función es la de expandir la difuminación del Neón.

.neon-basico-mas-difuminado {
   box-shadow: 0 0 14px 1px #FF1493;
}

Vamos con el siguiente valor de la lista, el cuarto desde la izquierda. Este sirve para expandir todo el Neón (no solo la difuminación):

.neon-basico-mas-expandido {
   box-shadow: 0 0 7px 4px #FF1493;
}

Él último valor de todos no tiene misterio alguno, ahí definimos el color de nuestro Neón, para el ejemplo crearemos un Neón con un color distinto, usando un color turquesa.

.neon-basico-turquesa {
   box-shadow: 0 0 7px 1px #0CFFF4;
}

Truco para Potenciar más el Neón

Supongamos que quieres tener un Neón más potente. Ya has visto que podemos usar el cuarto valor de box-shadow para expandir más el Neón y una de las consecuencias de ello es que además el Neón se potencia más. Sin embargo, si tu quieres potenciarlo sin la necesidad de tener que expandirlo como tal… pues verás, se puede con este truco.

.neon-basico-potenciado {
   box-shadow: 0 0 7px 1px #FF1493, 0 0 7px 1px #FF1493;
}

Como ves, lo único que tenemos que hacer es añadir una «,» y tras ello añadir otro box-shadow en la misma línea. Lo que hacemos con esto es básicamente superponer una sombra sobre la otra, lo cuál da lugar a una potenciación sin tener que expandir el Neón como tal.

Esto se puede repetir hasta la saciedad, vamos a hacer un Neón exageradamente potenciado y sin expansión:

.neon-basico-potenciadisimo {
   box-shadow: 0 0 7px 1px #FF1493, 0 0 7px 1px #FF1493, 0 0 7px 1px #FF1493, 0 0 7px 1px #FF1493;
}

Fusionando Colores

Tras ver los ejemplos anteriores seguramente te has preguntado qué pasaría si añadimos colores distintos en las distintas sombras del box-shadow, pues esto da lugar a que las sombras se fusionen para crear un color nuevo. Para que veas a qué me refiero, haré una fusión del color rosa y del turquesa que hemos usado en estos ejemplos para ver qué sale (miedo me da la cosa que puede salir de ahí, pero haciendo esto se pueden crear Neones muy interesantes).

.neon-basico-fusionado {
   box-shadow: 0 0 7px 1px #FF1493, 0 0 7px 1px #0CFFF4;
}

Pues la verdad es que no me esperaba para nada este resultado, lo que ha surgido es una especie de Neón rosa clarito.

Pero eso no es todo, puedes jugar con los distintos parámetros que ya hemos comentado en este post más arriba para crear resultados bastante peculiares. Ahora haremos, por ejemplo, que una sombra se expanda y difumine más que la otra para ver qué ocurre (me lo estoy pasando pipa).

.neon-basico-fusionado-2 {
   box-shadow: 0 0 4px 2px #FF1493, 0 0 8px 2px #0CFFF4;
}

E incluso, si nos lo montamos bien y jugamos con los valores de posicionamiento del box-shadow (los 2 primeros) podemos llegar a conseguir un Neón que sea de… ¡dos colores por separado! Mira, sería algo así:

.neon-basico-bicolor {
   box-shadow: 2px -2px 7px 2px #FF1493, -2px 2px 7px 2px #0CFFF4;
}

Pues un poco sin quererlo, he creado una especie de efecto a lo TikTok que mola bastante ¿no? Creo que incluso lo voy a usar en algún lado de alguno de mis proyectos. Para añadir un bloque llamada de acción para que la gente visite tu canal de TikTok quedaría genial.

Bueno, ya ves que las posibilidades de esto son infinitas, así que ahora te animo a que crees tus propias invenciones a ver si consigues encontrar el Neón que tu estés buscando. Si consigues realizar un Neón que mole mucho, puedes dejarme el código en comentarios y si veo que es muy interesante lo añadiré a este post para que otra gente pueda ver otros ejemplos de Neón para tomar ideas.

Y nada, por hoy eso sería todo. Espero que os haya gustado el post de hoy, ¡nos vemos en el siguiente!

He probado muchos proveedores de hosting a lo largo de mi carrera y este es sin ninguna duda el que más te recomiendo de todos ellos. Además, si adquieres algún plan de hosting con mi enlace me estarás ayudando enormemente ya que me darán una comisión por ello.
Más información aquí.

Otros Posts que Pueden Interesarte:

• Cómo Convertir Texto en Mayúsculas o Minúsculas en CSS
• Cómo Crear Texto Tachado en HTML y CSS
• Cómo Crear Textos con Degradado en CSS
• Cómo Crear Degradados (Gradients) en CSS
• Cómo Modificar el Espacio entre Letras en CSS
• Cómo Cambiar el Tamaño del Texto con CSS
• Cómo Quitar el Punto y Crear Listas Elegantes en CSS